說到 React 狀態管理,必提的確定是 Redux 與 MobX,2018 年快過去了,它們依然是最火熱的狀態管理工具,也有一些基於 Redux 的,如 dva、rematch 等,也有新的,如 mobx-state-tree,這裏不對各個解決方案做評價。react
但仍是想吐槽:git
什麼 provider, connections, actions, reducers, effects, dispatch, put, call, payload, @observable, @computed, @observer, @inject...github
一堆模板代碼、各類概念、什麼哲學原則... 還有各類多如牛毛的 Api。api
我只是想早點碼完頁面下班,早點下班健身、陪妹子...dom
因此,我想要這樣的一個狀態管理庫:ide
我是個實用主義者,開發效率、代碼可維護性和可讀性、開發體驗大於各類什麼範式、各類理論,也不須要裝純,重要的是能夠快速處理業務,產生價值,早點下班打王者。工具
有一天,我看到了 mobx 做者的 immer, 我感受使用 immer, 能夠實現一個我理想中的狀態管理工具,因此就造了一個輪子,叫 stamen, 他有什麼特色呢,Show you the code: stamen。spa
若是有什麼核心特色的話,那應該是 "簡潔",這裏指的是使用者寫代碼時簡潔,能夠專一於業務,而不是自身源代碼簡潔,把問題留給使用者。code
CodeSandbox上的例子: Basic | Asyncserver
用法比較簡單:
import React from 'react'; import { render } from 'react-dom'; import { createStore } from 'stamen'; const { consume, mutate } = createStore({ count: 1 }); const App = () => ( <div> <span>{consume(state => state.count)}</span> <button onClick={() => mutate(state => state.count--)}>-</button> <button onClick={() => mutate(state => state.count++)}>+</button> </div> ); render(<App />, document.getElementById('root'));
只有 state 和 action ,沒有其它概念,只有一個 api:
const { consume, mutate } = createStore({ count: 1 });
Stamen
代碼實現只有40行,對於大部分項目來講,這40行代碼所包含的功能已然足夠。
更多用法能夠看:
Github: https://github.com/forsigner/...
文檔: http://forsigner.com/stamen-z...