接上一篇：我理想中的狀態(tài)管理工具

之前說，對(duì)于我個(gè)人來而言，理想的狀態(tài)管理工具只需同時(shí)滿足兩個(gè)特點(diǎn)：

• 簡(jiǎn)單易用，并且適合中大型項(xiàng)目
• 完美地支持 Typescript

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

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

先看看 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，核心的理念包括：

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

為什么不需要 Provider ？

Stamen 默認(rèn)是多 store，這更靈活簡(jiǎn)單 ，所以并不需要使用 Provider 包裹。

為什么使用 Reack Hooks?

用 React Hooks 寫出代碼可讀性更強(qiáng)，可維護(hù)性更高，對(duì) Typescript 支持更好，hoc 最大問題是對(duì) Typescript 支持不好，使用 render props 最大問題寫出的代碼有點(diǎn)反人類，當(dāng)然 hoc 和 render props 和 React Hooks 對(duì)比還有其他缺點(diǎn)，具體可以 Hooks 文檔。

之前有一段代碼，用 render props 會(huì)產(chǎn)生太多嵌套：

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 改寫，可讀性會(huì)大大提高，下面用 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 對(duì) Typescript 支持，render props 書寫可讀性差，React Hooks 能很好的平衡這兩點(diǎn)。

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

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

圖二: state 的自動(dòng)補(bǔ)全。

圖三: actions 的自動(dòng)補(bǔ)全，dispatch 支持兩種類型參數(shù)，一種是字符串(action 的函數(shù)名)，另外一種 actionSelector 函數(shù)(類似 redux 的 stateSlector)，推薦使用后面一種，開發(fā)體驗(yàn)會(huì)更好。

圖四: 使用 actionSelector，方便地跳轉(zhuǎn)到 action 函數(shù)定義處，方便安全地進(jìn)行重構(gòu)重命名等操作。

Stamen 的 Api 非常簡(jiǎn)單，可以直接看類型定義：

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;}; };

更多關(guān)于 Stamen 的使用方法，可以看 github: stamen

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。