a lightweight flux style store as a component

sto.js

import React from 'react';

export class Sto extends React.Component{
  static defaultProps = {
    store: x => x
  }
  state = {
    value: this.props.store()
  }
  dispatch = action => this.setState({
    value: this.props.store(this.state.value, action)
  })
  render(){
    return this.props.children(this.state.value, this.dispatch);
  }
}


function store(counter = 0, action){
  switch(action.type){
    case 'inc': return counter + 1;
    case 'dec': return counter - 1;
    default: return counter;
  }
}

export class App{
  render(){
    return <Sto store={store}>{
      (state, dispatch) => <div onClick={() => dispatch({type: 'inc'})}>
        clicked {state} times
      </div>
    }</Sto>;
  }
}