const React = require("react"),
      ffux  = require("../ffux")


const App = React.createClass({
  render() {
    const {counter, step} = this.props.state
    const {incrementCounter, decrementCounter} = this.props.actions.counter
    const {incrementStep, decrementStep} = this.props.actions.step
    return (
      <div>
        <div>Counter: {counter}, Step: {step}</div>
        <button onClick={incrementCounter}>counter +</button>
        <button onClick={decrementCounter}>counter -</button>
        <br />
        <button onClick={incrementStep}>step +</button>
        <button onClick={decrementStep}>step -</button>
      </div>
    )
  }
})

const {run, pure, impure} = ffux


const Counter = ffux({
  _increment: pure(({state, deps: {step}}) => state + step.state()),

  incrementCounter: impure(({state, self}) => {
    setTimeout(_ => self._increment(), state * 100)
  }),

  decrementCounter: pure(({state, deps: {step}}) => state - step.state())
})

const Step = ffux({
  incrementStep: pure(({state}) => state + 1),
  decrementStep: pure(({state}) => state - 1)
})


;(function() {
  const step    = Step(1)
  const counter = Counter(10, {step})

  run({counter, step}, (model) => {
    React.render(<App {...model} />, document.getElementById("app"))
  })
})()

const React = require("react"),
      ffux  = require("../ffux")

const {createStore, pure, impure} = ffux


const Counter = createStore({
  // pure actions are *synchronous* functions ({state}, ...action args) -> new state
  // and the store's state can be modified ONLY by using these pure actions
  increment: pure(({state}, step) => state + step),

  decrement: pure(({state}, step) => state - step),

  reset: pure(({state}) => 0),

  // impure actions can't change state but they can call pure actions
  // by using "self" reference. thus you can do sync/async/whatever
  // you want in impure actions: these are the place to e.g. send data
  // to the backend server
  resetAsync: impure(({state, self}) => {
    setTimeout(self.reset, 1000)
  })
})

window.onload = function() {
  // we can create store and set initial state to it and then
  // construct our ffux dispacher by using the template object
  ffux({counter: Counter(10)}).dispatch((model) => {
    React.render(<App {...model} />, document.getElementById("app"))
  })
}

const App = React.createClass({
  render() {
    // passed model contains two properties:
    //   * "state" contains the current state of the application
    //   * "actions" contains the actions that can be performed
    // both "state" and "actions" contain the same keys that were
    // used in "ffux(...)" construction
    const {counter} = this.props.state

    // actions are just functions that can be called with arguments normally
    const {increment, decrement, resetAsync} = this.props.actions.counter

    return (
      <div>
        <div>Counter: {counter}</div>
        {/* use step = 2 for incrementing, step = 1 for decrementing */}
        <button onClick={() => increment(2)}>+</button>
        <button onClick={() => decrement(1)}>-</button>
        <button onClick={() => resetAsync()}>reset</button>
      </div>
    )
  }
})

Update counter example