接上一篇：我理想中的狀態管理工具

之前說，對于我個人來而言，理想的狀態管理工具只需同時滿足兩個特點：

• 簡單易用，并且適合中大型項目
• 完美地支持 Typescript

未能找到一個完美滿足這兩點的，所以我決定自己造了一個：叫 Stamen。

首先是 簡單易用，并且適合中大型項目，Stamen 的 Api 設計借鑒了 dva、mirror、rematch，但卻更簡單，主要借鑒了它們的 model 的組織方式：state、reducers、effects。把 action 分為 reducer 和 effect 兩類是很好的實踐。

先看看 Stamen 是怎么使用的：

import React from 'react'; import ReactDOM from 'react-dom'; import { createStore } from 'stamen';const CounterStore = createStore({state: {count: 10,},reducers: {increment(state) {state.count++;},decrement(state) {state.count--;},},effects: {async asyncIncrement(dispatch) {await new Promise((resolve, reject) => {setTimeout(() => {resolve();}, 1000);});dispatch('increment');},}, });const App = () => {const { get, dispatch } = CounterStore.useStore();const count = get(state => state.count);return (<div><span>{count}</span><button onClick={() => dispatch('decrement')}>-</button><button onClick={() => dispatch(actions => actions.increment)}>+</button><button onClick={() => dispatch('asyncIncrement')}>async+</button></div>); };ReactDOM.render(<App />, document.getElementById('root'));

線上 demo 可以看 (Check on CodeSandbox): Basic | Async

這段代碼涵蓋了 Stamen 的全部 Api，核心的理念包括：

• 盡量簡潔的 Api，沒有 connect、Provider
• 使用 React Hooks，拋棄 hoc 和 render props
• 推薦使用多 store，store 是分形的，更加靈活

為什么不需要 Provider ？

Stamen 默認是多 store，這更靈活簡單 ，所以并不需要使用 Provider 包裹。

為什么使用 Reack Hooks?

用 React Hooks 寫出代碼可讀性更強，可維護性更高，對 Typescript 支持更好，hoc 最大問題是對 Typescript 支持不好，使用 render props 最大問題寫出的代碼有點反人類，當然 hoc 和 render props 和 React Hooks 對比還有其他缺點，具體可以 Hooks 文檔。

之前有一段代碼，用 render props 會產生太多嵌套：

const Counter = create({ count: 0 }); const User = create({ name: 'foo' }); const Todo = create({ todos: [] });const App = () => (<div>{User.get(user => (<div><span>{user.name}</span><div>{Todo.get(todo => (<div>{todo.todos.map(item => {<div><span>{item.name}</span>;<span>{Counter.get(s => s.count)}</span></div>;})}</div>))}</div></div>))}</div> );

如果使用 React Hooks 改寫，可讀性會大大提高，下面用 Stamen 改寫：

const counterStore = CounterStore.useStore(); const userStore = UserStore.useStore(); const todoStore = TodoStore.useStore();const count = counterStore.get(s => s.count); const name = userStore.get(s => s.name); const todos = TodoStore.get(s => s.todos);const App = () => (<div><span>{name}</span><div>{todos.map(item => {<div><span>{item.name}</span><span>{count}</span></div>;})}</div></div> );

接下來是 完美地支持 Typescript，前面是過 hoc 對 Typescript 支持，render props 書寫可讀性差，React Hooks 能很好的平衡這兩點。

下面用幾張 gif 來展示 Stamen 對 Typescript 完美地支持。

圖一: 用鼠標懸停到變量 state 和 action，可以查看它們完整的類型定義。不同于使用 connect 等 hoc，你不要寫任何類型定義，一切都是自動地類型推倒。

圖二: state 的自動補全。

圖三: actions 的自動補全，dispatch 支持兩種類型參數，一種是字符串(action 的函數名)，另外一種 actionSelector 函數(類似 redux 的 stateSlector)，推薦使用后面一種，開發體驗會更好。

圖四: 使用 actionSelector，方便地跳轉到 action 函數定義處，方便安全地進行重構重命名等操作。

Stamen 的 Api 非常簡單，可以直接看類型定義：

interface Opt<S, R, E> {state: S;reducers?: R;effects?: E; }declare function createStore<S, R extends Reducers<S>, E extends Effects>(opt: Opt<S, R, E>): {useStore: () => {get: <P>(selector: Selector<S, P>) => P;dispatch: (action: ActionSelector<R, E> | keyof R | keyof E, payload?: any) => void;}; };

更多關于 Stamen 的使用方法，可以看 github: stamen

總結

以上是生活随笔為你收集整理的可能是基于 Hooks 和 Typescript 最好的状态管理工具的全部內容，希望文章能夠幫你解決所遇到的問題。

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