Hydux: 一个 Elm-like 的 全功能的 Redux 替代品

在学习和使用 Fable + Elmish 一段时间以后，对 Elm 架构有了更具体的了解, 和预料中的同样， Elm 风格的框架果真仍是和强类型的 Meta Language 语言更搭，只有一个字: 爽。 可是呢，Fable 毕竟是一个小众语言，使用的 F# 语法并且仍是来自“万恶”的微软，开发环境还须要依赖 dotnet, 就这几点恐怕在公司的一些正式项目中推行就有些难度。

恰好最近须要作一个答题小游戏的应用，不想再上 React + Redux 全家桶了，一是体积太大，二是不管配置仍是写起来都太繁琐。突然发现 hyperapp 让我眼前一亮，简洁的架构，elm 风格， 1kb 的体积，丰富的生态，简直小应用神器! 可是呢，在实际使用中就发现，hyperapp 破坏性更新太多，致使不少第三方库，好比 persist, Redux Devtools, hmr 都不能用了，虽然这些库实现都不复杂，可是一个个改太麻烦了，又不想用老版本，干脆本身从新造了个轮子 -- Hydux.

Hydux 的语法和 hyperapp 差很少，抽离了 view 层，特色是 内置了 热更新，logger, Redux Devtools 和 persist，依然是 1kb大小 (gzip, 不包括开发环境)，真正的一站式解决方案!

view 层内置了 1kb 的 picodom, 同时也有官方支持的 React 扩展 使用 React 来渲染.

说了这么多，仍是上点代码:
首先咱们有一个 counter 模块，代码和 Elm 的组织方式很相似，不须要想 Redux 在 Actions/Reducers/ActionTypes 中跳来跳去的

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

而后呢，咱们能够像 Elm 同样 复用 模块, 之前在用 Redux 时老是会面临不知道怎么复用才好的问题，而实际上 Elm 的复用是超级简单和方便的。

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

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

// use built-in 1kb picodom to render the view.
let app = withPicodom()(_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) // 内置的 logger 
  app = devTools()(app) // 内置的 Redux Devtools 扩展支持
  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,
})

而后就能够了！简单，可控，无痛的开发环境和代码组织。

在线 demo

异步使用的是相似 Elm 的反作用管理器风格, actions 能够是彻底纯的函数，也能够是直接返回一个 promise: https://github.com/hydux/hydu...

官网: https://github.com/hydux/hydux
官方支持的 React 扩展: https://github.com/hydux/hydu...