說到 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 });

Stamen 代碼實現只有40行，對于大部分項目來說，這40行代碼所包含的功能已然足夠。

更多用法可以看：

Github: https://github.com/forsigner/...
文檔: http://forsigner.com/stamen-z...

總結

以上是生活随笔為你收集整理的简洁的 React 状态管理库 - Stamen的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。