多是基於 Hooks 和 Typescript 最好的狀態管理工具

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

以前說，對於我我的來而言，理想的狀態管理工具只需同時知足兩個特色：

• 簡單易用，而且適合中大型項目
• 完美地支持 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