Redux

index.html

<div id="root" />

redux.markdown

Redux

A Pen by haykerman on CodePen.

License.

script.babel

// create store
const createStore = (reducer, initialState) => {
  let currentState = initialState;
  const listeners = [];

  const getState = () => currentState;
  const dispatch = action => {
    currentState = reducer(currentState, action);
    listeners.forEach(listener => listener());
  };

  const subscribe = listener => listeners.push(listener);

  return { getState, dispatch, subscribe };
};

// connect
const connect = (mapStateToProps, mapDispatchToProps) => Component => {
  class WrappedComponent extends React.Component {
    render() {
      return (
        <Component
          {...this.props}
          {...mapStateToProps(this.context.store.getState(), this.props)}
          {...mapDispatchToProps(this.context.store.dispatch, this.props)}
        />
      );
    }

    componentDidMount() {
      this.context.store.subscribe(this.handleChange);
    }

    handleChange = () => {
      this.forceUpdate();
    };
  }

  WrappedComponent.contextTypes = {
    store: PropTypes.object
  };

  return WrappedComponent;
};

// provider
class Provider extends React.Component {
  getChildContext() {
    return {
      store: this.props.store
    };
  }

  render() {
    return React.Children.only(this.props.children);
  }
}

Provider.childContextTypes = {
  store: PropTypes.object
};

// action type
const EXAMPLE_ACTION = "EXAMPLE_ACTION";

// action creator
const exampleAction = value => ({
  type: EXAMPLE_ACTION,
  payload: value
});

// reducer
const reducer = (state = {}, action) => {
  switch (action.type) {
    case EXAMPLE_ACTION:
      return state;
    default:
      return state;
  }
};

class SomeComponent extends React.Component {
  render() {
    return (<>Redux</>);
  }
}

ReactDOM.render(
  <Provider store={createStore(reducer)}>
    <SomeComponent />
  </Provider>,
  document.getElementById("root")
);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.7.2/prop-types.min.js"></script>