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

在學習和使用 Fable + Elmish 一段時間以後，對 Elm 架構有了更具體的瞭解, 和預料中的同樣，Redux 這種來自 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 中跳來跳去的

 1 // Counter.js
 2 export default {
 3   init: () => ({ count: 1 }), // 初始化狀態
 4   actions: { // actions 改變狀態
 5     down: () => state => ({ count: state.count - 1 }),
 6     up: () => state => ({ count: state.count + 1 })
 7   },
 8   view: (state: State) => (actions: Actions) => // view
 9     <div>
10       <h1>{state.count}</h1>
11       <button onclick={actions.down}>–</button>
12       <button onclick={actions.up}>+</button>
13     </div>
14 }

 

而後呢，咱們能夠像 Elm 同樣 複用 模塊, 之前在用 Redux 時老是會面臨不知道怎麼複用纔好的問題，而實際上 Elm 的複用是超級簡單和方便的。

 1 import _app from 'hydux'
 2 import withPersist from 'hydux/lib/enhancers/persist'
 3 import withPicodom, { h, React } from 'hydux/lib/enhancers/picodom-render'
 4 import Counter from './counter'
 5 
 6 // let app = withPersist<State, Actions>({
 7 //   key: 'my-counter-app/v1'
 8 // })(_app)
 9 
10 // use built-in 1kb picodom to render the view.
11 let app = withPicodom()(_app)
12 
13 if (process.env.NODE_ENV === 'development') {
14   // built-in dev tools, without pain.
15   const devTools = require('hydux/lib/enhancers/devtools').default
16   const logger = require('hydux/lib/enhancers/logger').default
17   const hmr = require('hydux/lib/enhancers/hmr').default
18   app = logger()(app) // 內置的 logger 
19   app = devTools()(app) // 內置的 Redux Devtools 擴展支持
20   app = hmr()(app) // 內置的熱更新模塊
21 }
22 
23 const actions = {
24   counter1: Counter.actions,
25   counter2: Counter.actions,
26 }
27 
28 const state = {
29   counter1: Counter.init(),
30   counter2: Counter.init(),
31 }
32 
33 const view = (state: State) => (actions: Actions) =>
34     <main>
35       <h1>Counter1:</h1>
36       {Counter.view(state.counter1)(actions.counter1)}
37       <h1>Counter2:</h1>
38       {Counter.view(state.counter2)(actions.counter2)}
39     </main>
40 
41 export default app({
42   init: () => state,
43   actions,
44   view,
45 })

 

而後就能夠了！簡單，可控，無痛的開發環境和代碼組織。

在線 demo

異步使用的是相似 Elm 的反作用管理器風格, actions 能夠是徹底純的函數，也能夠是直接返回一個 promise: https://github.com/hydux/hydux#actions-with-cmd

官網: https://github.com/hydux/hydux 

官方支持的 React 擴展: https://github.com/hydux/hydux-react