Hydux構(gòu)建前端應(yīng)用的 TypeScript 庫

在學(xué)習(xí)和使用 Fable + Elmish 一段時(shí)間之后，對 Elm 架構(gòu)有了更具體的了解, 和預(yù)料中的一樣， Elm 風(fēng)格的框架果然還是和強(qiáng)類型的 Meta Language 語言更搭，只有一個(gè)字: 爽。 但是呢，F(xiàn)able 畢竟是一個(gè)小眾語言，使用的 F# 語法而且還是來自“萬惡”的微軟，開發(fā)環(huán)境還需要依賴 dotnet, 就這幾點(diǎn)恐怕在公司的一些正式項(xiàng)目中推行就有些難度。

剛好最近需要做一個(gè)答題小游戲的應(yīng)用，不想再上 React + Redux 全家桶了，一是體積太大，二是無論配置還是寫起來都太繁瑣。忽然發(fā)現(xiàn) hyperapp 讓我眼前一亮，簡潔的架構(gòu)，elm 風(fēng)格， 1kb 的體積，豐富的生態(tài)，簡直小應(yīng)用神器! 但是呢，在實(shí)際使用中就發(fā)現(xiàn)，hyperapp 破壞性更新太多，導(dǎo)致很多第三方庫，比如 persist, Redux Devtools, hmr 都不能用了，雖然這些庫實(shí)現(xiàn)都不復(fù)雜，但是一個(gè)個(gè)改太麻煩了，又不想用老版本，干脆自己重新造了個(gè)輪子 -- Hydux.

Hydux 的語法和 hyperapp 差不多，抽離了 view 層，支持任意的 vdom 庫，包括 react, 特點(diǎn)是 內(nèi)置了 熱更新，logger, Redux Devtools 和 persist，依然是 1kb大小 (gzip, 不包括開發(fā)環(huán)境)，完全無痛的開發(fā)環(huán)境，真正的一站式解決方案!

view 層內(nèi)置了 1kb 的 picodom, 同時(shí)也有官方支持的 React 擴(kuò)展 使用 React 來渲染.

說了這么多，還是上點(diǎn)代碼: 首先我們有一個(gè) counter 模塊，代碼和 Elm 的組織方式很類似，不需要像 Redux 在 Actions/Reducers/ActionTypes 中跳來跳去的

// Counter.js
export default {
  init: () => ({ count: 1 }), // 初始化狀態(tài)
  actions: { // actions 改變狀態(tài)
    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 一樣 復(fù)用 模塊, 以前在用 Redux 時(shí)總是會面臨不知道怎么復(fù)用才好的問題，而實(shí)際上 Elm 的復(fù)用是超級簡單和方便的。

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) // 內(nèi)置的 logger 
  app = devTools()(app) // 內(nèi)置的 Redux Devtools 擴(kuò)展支持
  app = hmr()(app) // 內(nèi)置的熱更新模塊
}

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,
})

然后就可以了！簡單，可控，無痛的開發(fā)環(huán)境和代碼組織。

在線 demo