簡潔的 React 狀態管理 - Stamen
說到 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, 可以實現一個我理想中的狀態管理方工具,所以造了一個輪子,叫ofollow,noindex">stamen , 他有什麼特點呢,我說過想要的就是。
如果有什麼核心特點 的話,那應該是 “簡潔 “,這裡指的是使用者寫程式碼時簡潔,可以專注於業務,而不是自身原始碼簡潔,把問題留給使用者。
用法比較點單:
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 });