說到 React 狀態管理,必提的肯定是 Redux 與 MobX,2018 年快過去了,它們依然是最火熱的狀態管理工具,也有一些基於 Redux 的,如 dva、rematch 等,也有新的,如 mobx-state-tree,這裏不對各個解決方案作評價。
但還是想吐槽:
什麼 provider, connections, actions, reducers, effects, dispatch, put, call, payload, @observable, @computed, @observer, @inject...
一堆模板代碼、各種概念、什麼哲學原則... 還有各種多餘牛毛的 Api。
我只是想早點碼完頁面下班,早點下班健身、陪妹子...
所以,我想要這樣的一個狀態管理庫:
- 輕量 個人做移動端開發比較多
- 簡潔 沒模板代碼, 儘量少 api
- 符合直覺 沒複雜的概念, 給個 action 改 state 就好
- 清晰 更易寫出可維護和可讀性好的代碼
- 高效 更高的開發效率,這很重要
- Typescript 高度支持 state 和 action 的智能提示
我是個實用主義者,開發效率、代碼可維護性和可讀性、開發體驗大於各種什麼範式、各種理論,也不需要裝純,重要的是可以快速處理業務,產生價值,早點下班打王者。
有一天,我看到了 mobx 作者的 immer, 我感覺使用 immer, 可以實現一個我理想中的狀態管理方工具,所以造了一個輪子,叫 stamen, 他有什麼特點呢,Show you the code: stamen。
如果有什麼核心特點的話,那應該是 "簡潔",這裏指的是使用者寫代碼時簡潔,可以專注於業務,而不是自身源代碼簡潔,把問題留給使用者。
CodeSandbox上的例子: Basic | Async
用法比較點單:
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 });
代碼實現只要 40 行,點對於大部分來說,這40行包含的功能更依然足夠。
更用法可以看:
Github: https://github.com/forsigner/...
文檔: http://forsigner.com/stamen-z...