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

iforsigner發表於2018-11-14
HookTypeScript

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

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

  • 簡單易用，並且適合中大型專案
  • 完美地支援 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，你不要寫任何型別定義，一切都是自動地型別推倒。

hover

圖二: state 的自動補全。

state

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

action

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

go

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

相關文章