app.js

// Import Jumpsuit
import { Render, State, Effect, Hook, Actions, Component } from 'jumpsuit'


// Create a state with some actions
const CounterState = State({

  // Initial State
  initial: { count: 0 },

  // Actions
  increment (state, payload) {
    return { count: ++state.count }
  },
  decrement (state, payload) {
    return { count: --state.count }
  },
})

// Create an asynchronous increment action
Effect('asyncIncrement', (time = 1000) => {
  setTimeout(() => Actions.increment(), time)
})

// Create a global hook
Hook((action, getState) => {
  // Never let the counter equal 10!
  if (getState().counter.count === 10) {
    Math.random() > 0.5 ? Actions.increment() : Actions.decrement()
  }
})

// Create a component
const Counter = Component({
  render() {
    return (
      <div>
        <h1>{ this.props.count }</h1>
        <button onClick={ () => Actions.increment() }>Increment</button>
        <button onClick={ () => Actions.decrement() }>Decrement</button>
        <button onClick={ () => Actions.asyncIncrement() }>Decrement</button>
      </div>
    )
  }
}, (state) => ({
  // Subscribe to the counter state (will be available via this.props.counter)
  count: state.counter.count
}))


// Render your app!
Render({
  counter: CounterState
}, <Counter/>)