Get started with flux CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with flux CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/flux/4.0.4/Flux.min.js"></script>
  <script src="https://cdn.cdnhub.io/flux-react/0.37.1/FluxReact.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
    // Define the Flux store
    const CounterStore = {
      state: { count: 0 },

      getInitialState() {
        return this.state;
      },

      dispatch(action) {
        switch (action.type) {
          case 'INCREMENT':
            this.setState({ count: this.state.count + 1 });
            break;
          case 'DECREMENT':
            this.setState({ count: this.state.count - 1 });
            break;
          default:
            return;
        }
      },
    };

    // Create a Flux store instance
    const counterStore = new CounterStore();

    // Define the Flux action creator
    const Actions = {
      increment() {
        return { type: 'INCREMENT' };
      },

      decrement() {
        return { type: 'DECREMENT' };
      },
    };

    // Define the Flux dispatcher
    const Dispatcher = {
      dispatch(handler) {
        const action = handler();
        counterStore.dispatch(action);
      },
    };

    // Define the Flux store and action creator bindings
    Flux.Store.create(CounterStore, Dispatcher);
    Flux.Actions(Actions);

    // Define the React component
    class Counter extends React.Component {
      constructor(props) {
        super(props);
        this.state = { count: 0 };
      }

      componentDidMount() {
        this.unsubscribe = counterStore.addListener(() => {
          this.setState({ count: counterStore.state.count });
        });
      }

      componentWillUnmount() {
        this.unsubscribe();
      }

      render() {
        return (
          <div>
            <p>Count: {this.state.count}</p>
            <button onClick={() => this.props.dispatch(Actions.increment())}>+</button>
            <button onClick={() => this.props.dispatch(Actions.decrement())}>-</button>
          </div>
        );
      }
    }

    // Define the React Redux Provider
    const Provider = React.createContext();

    // Render the React application
    ReactDOM.render(
      <Provider value={{ dispatch: store => dispatcher.dispatch.bind(dispatcher, store) }}>
        <Counter />
      </Provider>,
      document.getElementById('root')
    );

    // Define the Flux dispatcher and handler
    const dispatcher = new Flux.Dispatcher();
    const handleIncrement = () => Actions.increment();
    const handleDecrement = () => Actions.decrement();

    // Register the Flux dispatcher handlers
    dispatcher.registerHandler('INCREMENT', handleIncrement);
    dispatcher.registerHandler('DECREMENT', handleDecrement);

    // Dispatch the initial actions
    dispatcher.dispatch(handleIncrement);
  </script>
</body>
</html>
Get started with flux CDN

Stable version

How to start using flux CDN

All versions
