State consumer

connect-state.js

class ConnectState extends React.Component {
  state = this.props.mapState(this.props.state);

  static getDerivedStateFromProps (nextProps, nextState) {}

  shouldComponentUpdate (nextProps) {
    if (!Object.keys(this.state).length) {
      this.setState(this.props.mapDispatch(this.props.state));
      return true;
    }

    console.log({
      s: this.state,
      nextState: nextProps.mapState(nextProps.state),
      state: this.props.mapState(this.state)
    });
    
    return false;
  }

  render () {
    return this.props.children({ state: this.props.state, dispatch: this.props.dispatch });
  }
}

export function StateConsumer ({ mapState, mapDispatch, children }) {
  return (
    <StateContext.Consumer>
      {({ state, dispatch }) => (
        <ConnectState state={state} dispatch={dispatch} mapState={mapState} mapDispatch={mapDispatch}>
          {children}
        </ConnectState>
      )}
    </StateContext.Consumer>
  );
}