資訊專欄INFORMATION COLUMN
摘要：接上一篇我理想中的狀態管理工具之前說，對于我個人來而言，理想的狀態管理工具只需同時滿足兩個特點簡單易用，并且適合中大型項目完美地支持未能找到一個完美滿足這兩點的，所以我決定自己造了一個叫。把分為和兩類是很好的實踐。
接上一篇：我理想中的狀態管理工具
之前說，對于我個人來而言，理想的狀態管理工具只需同時滿足兩個特點：
簡單易用，并且適合中大型項目
完美地支持 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 (
{count}
);
};
ReactDOM.render(
線上 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 = () => (
{User.get(user => (
{user.name}
{Todo.get(todo => (
{todo.todos.map(item => {
{item.name};
{Counter.get(s => s.count)}
;
})}
))}
))}
);
如果使用 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 = () => ({name});{todos.map(item => {{item.name} {count}; })}
接下來是 完美地支持 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 非常簡單，可以直接看類型定義：
