iFlow - counter example with React.

iFlow/react-iFlow /react- counter example.

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/[email protected]/prop-types.min.js"></script>
<script src="https://unpkg.com/react-iflow/dist/umd/index.js"></script>
<script src="https://unpkg.com/iflow/dist/umd/index.min.js"></script>
<div id="app"></div>

Babel + JSX

const {iFlow} = iflow
const {default:flow} = iFlowReact

const pipe = iFlow({
  calculate (number) {
    this.counter += number
  },
  counter: 0,
})

const store = pipe.create()

const Counter = flow(store)(class extends React.Component {
  render() {
  	console.log('render');
    return (
    	<div>
        <button onClick={() => this.props.store.calculate(-1)}>-</button>
        {this.props.store.counter.a || this.props.store.counter }
        <button onClick={() => this.props.store.calculate(1)}>+</button>
      </div>
    );
  }
})

ReactDOM.render(
  <Counter />,
  document.getElementById('app')
);
console.log('iFlow store:', store);
window.store = store;