資訊專欄INFORMATION COLUMN
摘要：接上一篇我理想中的狀態(tài)管理工具之前說(shuō)，對(duì)于我個(gè)人來(lái)而言，理想的狀態(tài)管理工具只需同時(shí)滿足兩個(gè)特點(diǎn)簡(jiǎn)單易用，并且適合中大型項(xiàng)目完美地支持未能找到一個(gè)完美滿足這兩點(diǎn)的，所以我決定自己造了一個(gè)叫。把分為和兩類是很好的實(shí)踐。
接上一篇：我理想中的狀態(tài)管理工具
之前說(shuō)，對(duì)于我個(gè)人來(lái)而言，理想的狀態(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 (
{count}
);
};
ReactDOM.render(
線上 demo 可以看 (Check on CodeSandbox): Basic | Async
這段代碼涵蓋了 Stamen 的全部 Api，核心的理念包括：
盡量簡(jiǎn)潔的 Api，沒(méi)有 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 最大問(wèn)題是對(duì) Typescript 支持不好，使用 render props 最大問(wèn)題寫出的代碼有點(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 = () => (
{User.get(user => (
{user.name}
{Todo.get(todo => (
{todo.todos.map(item => {
{item.name};
{Counter.get(s => s.count)}
;
})}
))}
))}
);
如果使用 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 = () => ({name});{todos.map(item => {{item.name} {count}; })}
接下來(lái)是 完美地支持 Typescript，前面是過(guò) hoc 對(duì) Typescript 支持，render props 書寫可讀性差，React Hooks 能很好的平衡這兩點(diǎn)。
下面用幾張 gif 來(lái)展示 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)，推薦使用后面一種，開(kāi)發(fā)體驗(yàn)會(huì)更好。
圖四: 使用 actionSelector，方便地跳轉(zhuǎn)到 action 函數(shù)定義處，方便安全地進(jìn)行重構(gòu)重命名等操作。
Stamen 的 Api 非常簡(jiǎn)單，可以直接看類型定義：
