Sweatpants

app.jsx

/////////////////////////////////
import React from "react"
import ReactDOM from 'react-dom'

let reducer = (state={count: 0}, action) => {
  if (action.type === 'up') {
    return {
      ...state,
      count: state.count + 1
    }
  } else {
    return state
  }
}

ReactDOM.render((
  <StateProvider reducer={reducer}>
    <App/>
  </StateProvider>
), node)


/////////////////////////////////
let SomeScreen = () => (
  <State>
    {({ state, dispatch }) => (
      <div>
        <h1>{state.count}</h1>
        <button onClick={() => dispatch({ type: 'up' })}>Up</button>
      </div>
    )}
  </State>
)

sweatpants.jsx

import React from "react"

let Context = React.createContext()

class StateProvider extends React.Component {
  state = {
    state: this.props.reducer(undefined, '@@INIT'),
    dispatch: (action) => {
      this.setState(state => ({ state: this.props.reducer(state, action)}))
    }
  }

  render() {
    let { reducer, ...props } = this.props
    return (
      <Context.Provider value={this.state} {...props}/>
    )
  }
}

let State = Context.Consumer

export { StateProvider, State }