簡潔的 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 });

更用法可以看：

Github:https://github.com/forsigner/stamen

文件:http://forsigner.com/stamen-zh-cn