README.md

Read/Write React Context

Quick Start

To start working with Read/Write Context, create a pair of Provider/Consumer components in the same way as for React Context API:

let CounterContext = createContext();

Using <Provider /> you define the root of the state. Once parent is removed, state disappears as well. This allows maintaining the life cycle of different states.

function CounterView() {
  return (
    <CounterContext.Provider>
      <CounterOutput />
      <CounterHandlers />
    </CounterContext.Provider>
  );
}

To render the state use <Consumer /> in the same way as you would expect.

function CounterOutput() {
  return (
    <CounterContext.Consumer>
      {value => <p>{value}</p>}
    </CounterContext.Consumer>
  );
}

In addition to the current state, <Consumer /> provides a method that can be use for updating the state of the closest <Provider />.

function CounterHandlers() {
  return (
    <CounterContext.Consumer>
      {(value, setState) => (
        <button onClick={() => setState(value + 1)}>
          Click to increment
        </button>
      )}
    </CounterContext.Consumer>
  );
}

Defining Reducer

By default, setState() method of <Consumer /> swaps the state with anything that it receives as an argument. If a certain logic needed for processing state updates, createContext() can receive a reducer function.

Given the counter example above, imagine defining reducer function that allows consumers to trigger state changes via Flux-like "actions".

let CounterContext = createContext(
  (state, input) => {
    switch (input) {
    case 'INCREMENT':
      return state + 1;
    case 'DECREMENT':
      return state - 1;
    }
  }
);

Since setState() callback is a positional argument, you're free to call it in the way that suitable for the purpose:

function CounterHandlers() {
  return (
    <CounterContext.Consumer>
      {(value, dispatch) => (
        <React.Fragment>
          <button onClick={() => dispatch('INCREMENT')}>
            Increment
          </button>
          <button onClick={() => dispatch('DECREMENT')}>
            Decrement
          </button>
        </React.Fragment>
      )}
    </CounterContext.Consumer>
  );
}

License

Unlicensed. Feel free to copy the code and readme.

ReadWriteContext.js

import React from 'react';

export default function createContext(reduce = identityReducer, initialState) {
  let ReadCtx = React.createContext(initialState);
  let WriteCtx = React.createContext();

  class Provider extends React.PureComponent {
    constructor(props) {
      super(props);
      this.state = { value: props.value };
      this.writer = input => {
        this.setState(state => ({
          value: reduce(state.value, input),
        }));
      };
    }

    render() {
      return (
        <WriteCtx.Provider value={this.writer}>
          <ReadCtx.Provider value={this.state.value}>
            {this.props.children}
          </ReadCtx.Provider>
        </WriteCtx.Provider>
      );
    }
  }

  function Consumer({ children }) {
    return (
      <WriteCtx.Consumer>
        {setState => (
          <ReadCtx.Consumer>
            {value => children(value, setState)}
          </ReadCtx.Consumer>
        )}
      </WriteCtx.Consumer>
    );
  }

  return { Provider, Consumer };
}

function identityReducer(state, input) {
  return input;
}