context-state.js

import React, { Component, createContext }  from 'react'

function initStore(store) {
    const Context = createContext();

    class Provider extends React.Component {
        constructor() {
            super();
            this.state = store.initialState;
        }

        selector = (value) => {
            return Object.keys(store.actions).reduce(
              (fn, key) => ({
                  ...fn,
                  [key]: (...args) => {
                      let result = store.actions[key](this.state[value], ...args);
                      this.setState(result);
                  },
              }),
              {},
          );
        };

        render() {
            return (
                <Context.Provider
                    value={{
                        state: this.state,
                        selector : this.selector
                }}>
                    {this.props.children}
                </Context.Provider>
            )
        }
    }

    const connect = select => Component => props => {
        return (
            <Context.Consumer select={select}>
                {({ state, selector}) => (
                    <Component state={state} actions={selector(select)} />
                )}
            </Context.Consumer>
        )
    };

    return {
        Provider,
        connect
    }
}


const store = {
    initialState: {
        count: 1 
    },
    actions: {
        increment: (value) => ({ count: value + 1 }),
        decrement: (value) => ({ count: value - 1 })
    }
};

const { Provider, connect } = initStore(store);

//Example 1
let SimpleCount = ({ state, actions }) => (
    <div>
        {state.count}
        <button onClick={actions.increment}>+</button>
        <button onClick={actions.decrement}>-</button>
    </div>
);

Count = connect('count')(Count);

export default class ContextState extends Component {
    render() {
        return (
            <Provider>
                <SimpleCount/>
            </Provider>
        )
    }
}