在學習和使用 Fable + Elmish 一段時間之後,對 Elm 架構有了更具體的瞭解, 和預料中的一樣, Elm 風格的框架果然還是和強類型的 Meta Language 語言更搭,只有一個字: 爽。 但是呢,Fable 畢竟是一個小衆語言,使用的 F# 語法而且還是來自“萬惡”的微軟,開發環境還需要依賴 dotnet, 就這幾點恐怕在公司的一些正式項目中推行就有些難度。
剛好最近需要做一個答題小遊戲的應用,不想再上 React + Redux 全家桶了,一是體積太大,二是無論配置還是寫起來都太繁瑣。忽然發現 hyperapp 讓我眼前一亮,簡潔的架構,elm 風格, 1kb 的體積,豐富的生態,簡直小應用神器! 但是呢,在實際使用中就發現,hyperapp 破壞性更新太多,導致很多第三方庫,比如 persist, Redux Devtools, hmr 都不能用了,雖然這些庫實現都不復雜,但是一個個改太麻煩了,又不想用老版本,乾脆自己重新造了個輪子 -- Hydux.
Hydux 的語法和 hyperapp 差不多,抽離了 view 層,支持任意的 vdom 庫,包括 react, 特點是 內置了 熱更新,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,
})
然後就可以了!簡單,可控,無痛的開發環境和代碼組織。
異步使用的是類似 Elm 的副作用管理器風格, actions 可以是完全純的函數,也可以是直接返回一個 promise: https://github.com/hydux/hydux#actions-with-cmd
官網: https://github.com/hydux/hydux
官方支持的 React 擴展: https://github.com/hydux/hydux-react