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

const {createStore, pure, impure} = ffux

const Counter = createStore({
  actions: {
    // 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)
    })
  }
})

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>
        <button onClick={() => increment(2)}>+2</button>
        <button onClick={() => decrement(1)}>-</button>
        <button onClick={() => resetAsync()}>reset</button>
      </div>
    )
  }
})

ffux({counter: Counter(10)}).listen((model) => {
  React.render(<App {...model} />, document.getElementById("app"))
})<commit_msg>Re-write counter example with event streams<commit_after>const React = require("react"),
      ffux  = require("../ffux")

const {createStore} = ffux

const Counter = createStore({
  actions: ['increment', 'decrement'],
  state: ({counter}, {increment, decrement}) => {
    return increment
      .merge(decrement.map(d => -d))
      .scan(counter, (state, delta) => state + delta)
  }
})

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
    const {counter} = this.props.state

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

    return (
      <div>
        <div>Counter: {counter}</div>
        <button onClick={() => increment(2)}>+2</button>
        <button onClick={() => decrement(1)}>-</button>
      </div>
    )
  }
})

ffux({counter: Counter()}, {counter: 10})
  .listen((model) => {
    React.render(<App {...model} />, document.getElementById("app"))
  })
{'fraction_non_alphanumeric': 0.15606326889279437, 'fraction_numerical': 0.005272407732864675, 'mean_word_length': 2.9859943977591037, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 38, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2714373', 'n_tokens_mistral': 848, 'n_tokens_neox': 825, 'n_words': 263}