Hydux

yarn add hydux # or npm i hydux

// Counter.js
export default {
  init: () => ({ count: 1 }),
  actions: {
    down: () => state => ({ count: state.count - 1 }),
    up: () => state => ({ count: state.count + 1 })
  },
  view: (state: State, actions: Actions) =>
    <div>
      <h1>{state.count}</h1>
      <button onclick={actions.down}>–</button>
      <button onclick={actions.up}>+</button>
    </div>
}

import _app from 'hydux'
import withPersist from 'hydux/lib/enhancers/persist'
import withultradom, { h, React } from 'hydux/lib/enhancers/ultradom-render'
import Counter from './counter'

// let app = withPersist<State, Actions>({
//   key: 'my-counter-app/v1'
// })(_app)

// use built-in 1kb ultradom to render the view.
let app = withultradom()(_app)

if (process.env.NODE_ENV === 'development') {
  // built-in dev tools, without pain.
  const devTools = require('hydux/lib/enhancers/devtools').default
  const logger = require('hydux/lib/enhancers/logger').default
  const hmr = require('hydux/lib/enhancers/hmr').default
  app = logger()(app)
  app = devTools()(app)
  app = hmr()(app)
}

const actions = {
  counter1: Counter.actions,
  counter2: Counter.actions,
}

const state = {
  counter1: Counter.init(),
  counter2: Counter.init(),
}

const view = (state: State, actions: Actions) =>
    <main>
      <h1>Counter1:</h1>
      {Counter.view(state.counter1, actions.counter1)}
      <h1>Counter2:</h1>
      {Counter.view(state.counter2, actions.counter2)}
    </main>

export default app({
  init: () => state,
  actions,
  view,
})

import app, { Cmd } from 'hydux'

function upLater(n) {
  return new Promise(resolve => setTimeout(() => resolve(n + 10), 1000))
}
app({
  init: () => ({ count: 1}),
  actions: {
    down: () => state => ({ count: state.count - 1 }),
    up: () => state => ({ count: state.count + 1 }),
    upN: n => state => ({ count: state.count + n }),
    upLater: n => state => actions/* actions of same level */ => [
      state, // don't change the state, won't trigger view update
      Cmd.ofPromise(
        upLater /* a function with single parameter and return a promise */,
        n /* the parameter of the funciton */,
        actions.upN /* success handler, optional */,
        console.error /* error handler, optional */ )
    ]
  },
  view: () => {/*...*/} ,
})

import * as assert from 'assert'
import app, { Cmd, wrapAction, noop } from '../index'
import Counter from './counter'

const initState = {
  counter1: Counter.init(),
  counter2: Counter.init(),
}
const actions = {
  counter2: counter.actions,
  counter1: {
    ...counter.actions,
    upN: (n: number) => wrapAction(counter.actions.upN, (action, parentState: State, parentActions: Actions) => {
      const [state, cmd] = action(n + 1)
      assert.equal(state.count, parentState.counter1.count + n + 1, 'call child action work')
      return [state, Cmd.batch(cmd, Cmd.ofFn(() => parentActions.counter2.up()))]
    })
  },
}
type State = typeof initState
type Actions = typeof actions
let ctx = app<typeof initState, typeof actions>({
  init: () => initState,
  actions,
  view: noop,
  onRender: noop
})

init: () => ({ count: 1 })
actions: {
  // (msg: Msg) => (state: State), update the state by msg
  reset: n => ({ count: 1 })
  // (msg: Msg) => (state: State) => (state: State)
  // update the state by msg and current state
  add: n => state => ({ count: state.count + n }),
  // (msg: Msg) => (state: State) => (actions: Actions) => void
  // update the state by state and other same level actions
  add12: () => (state, actions) => actions.add(12),
  // (msg: Msg) => (state: State) => (actions: Actions) => [state, CmdType<State, Actions>]
  // update the state by side effects
  remoteAdd: () => (state, actions) =>
    [ state,
      Cmd.ofPromise(
        () => fetch('http://your.server/some/path'),
        null,
        actions.add,
        console.log
      ) ],
}

git clone https://github.com/hydux/hydux.git
cd examples/counter
yarn # or npm i
npm start