Provider with middleware

provider-with-middleware.js

export class StateProvider extends React.PureComponent {
  static defaultProps = {
    state: {},
    reducers: [],
    middleware: []
  };

  state = this.props.state;

  _dispatch = action => {
    const { reducers, middleware } = this.props;
    const continueUpdate = middleware.reduce((result, middleware) => {
      return result !== null ? middleware(action, this.state) : result;
    }, undefined);

    if (continueUpdate !== null) {
      const nextState = reducers.reduce((state, reducer) => {
        return reducer(state, action) || state;
      }, this.state);

      this.setState(nextState);
    }
  };

  render () {
    return (
      <StateContext.Provider value={{ state: this.state, dispatch: this._dispatch }}>
        {this.props.children}
      </StateContext.Provider>
    );
  }
}