摘要：現(xiàn)已存在許多成熟的狀態(tài)管理解決方案，還有基于的但對于我個(gè)人來說，理想的狀態(tài)管理工具只需同時(shí)滿足兩個(gè)特點(diǎn)簡單易用，并且適合中大型項(xiàng)目完美地支持要做到這兩點(diǎn)其實(shí)并不簡單。所以我決定自己造一個(gè)可能是基于和最好的狀態(tài)管理工具

現(xiàn)已存在許多成熟的狀態(tài)管理解決方案：Redux、Mobx、Mobx-state-tree，還有基于 Redux 的 Dva.js、Rematch... 但對于我個(gè)人來說，理想的狀態(tài)管理工具只需同時(shí)滿足兩個(gè)特點(diǎn)：

簡單易用，并且適合中大型項(xiàng)目

完美地支持 Typescript

要做到這兩點(diǎn)其實(shí)并不簡單。

首先說說 “簡單易用，并且適合中大型項(xiàng)目”，這里包含層含義：

Api 足夠簡單，盡量引入少的概念

易用性高，使用者易用上手，較少的冗余代碼

能讓使用者更容易的寫出可維護(hù)性高的代碼

能讓業(yè)務(wù)代碼有良好地組織方式

怎么才能算是簡單易用呢？用一個(gè)叫 reworm 的狀態(tài)管理庫來舉例，它的使用方式是這樣的：

import React from "react";
import { Provider, create } from "reworm";

const { set, get } = create({ name: "John" });

class App extends React.Component {
  componentDidMount() {
    set(prev => ({ name: "Peter" + prev.name }));
  }
  render() {
    return (
      
        
{get(s => s.name)}
      
    );
  }
}

我碰巧寫寫過一個(gè)類似狀態(tài)管理庫，叫 mistate，甚至更簡單，連 Provider 都不用，實(shí)現(xiàn)代碼也只有 40 行。用法如下：

import React from "react";
import { create } from "mistate";

const { get, set } = create({ count: 0 });

const App = () => (
  

    {get(s => s.text)}
     set(prev => ({ count: prev.count++ }))}>+
  
);

它們足夠簡單，非常容易上手，但是它們致命是缺點(diǎn)是并不適合中大型項(xiàng)目，它們自由度太高，缺乏對業(yè)務(wù)代碼的約束，在多人合作的中大型項(xiàng)目，代碼的可維護(hù)性會(huì)大大降低，因?yàn)槊總€(gè)人寫的代碼風(fēng)格可能都不一樣。舉個(gè)例子，有些人可能會(huì)直接在 Component 中使用 set，有些人可能會(huì)基于 set 封裝成一個(gè)個(gè) acton:

import React from "react";
import { create } from "mistate";

const { get, set } = create({ count: 0 });
const actions = {
  increment() {
    set(prev => ({ count: prev.count++ })
  },
  decrement() {
    set(prev => ({ count: prev.count-- })
  },
}

const App = () => (
  

    {get(s => s.text)}
     actions.increment)}>+
     actions.decrement)}>+
  
);

這種自由度雖然靈活度高，但是降低了代碼的可維護(hù)性。

另外，用 render props 獲取 state 看似比 Redux 的 Connect 簡單，但其實(shí)并不優(yōu)雅，比如一個(gè)很常見的獲取多個(gè) state，使用 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)}
                
;
              })}
            
          ))}
        
      
    ))}
  
);

多個(gè) render props 的嵌套會(huì)導(dǎo)致 callback hell 類似結(jié)果，直接讓你的代碼反人類。

上面說完了 “簡單易用”，下面聊聊 “適合中大型項(xiàng)目”。當(dāng)然，我心目中的 “適合中大型項(xiàng)目” 的前提是 “簡單易用”，否者我并不會(huì)選擇它。

首先上面面說的 reworm 和 mistate 并不適合在中大型項(xiàng)目中使用，他們適合用在小型項(xiàng)目，比如一個(gè)簡單的營銷活動(dòng)，還以非常適合的場景就是在工具類庫中使用，因?yàn)樗鼈冏銐蚝唵巍⑤p量。

再說說大家熟悉 Redux 和 Mobx，首先是 Redux ，我個(gè)人認(rèn)為 Redux 確實(shí)滿足 “適合中大型項(xiàng)目”，因?yàn)槭褂谜邘缀醵紩?huì)按照它推薦的方式來組織代碼，但它不滿足 “簡單易用”，太過于繁瑣，使用起來有種吃*的感覺(本人沒吃過~)。然后是 Mobx，個(gè)人挺喜歡，挺 “簡單易用”，對使用者寫出的代碼有一定的限制，但感覺又太過于自由，并且非 Immutable，給人感覺是一個(gè)很中庸的解決方案。

在滿足 “簡單易用，并且適合中大型項(xiàng)目” 的前提下，個(gè)人比較喜歡的狀態(tài)管理解決方案是: dva、rematch、mirror，三者都是基于 Redux 開發(fā)，他們的 Api 相似度極高，簡化了 Redux 的使用，使得代碼組織方更加合理，通俗的說就是為 Redux 用戶提供了最舒服的套路去寫代碼，可以說是當(dāng)前 Redux 社區(qū)中的最佳實(shí)踐。

看看他們是如何組織代碼，以 mirror 來舉例:

import React from "react"
import mirror, {actions, connect, render} from "mirrorx"

// declare Redux state, reducers and actions,
// all actions will be added to `actions`.
mirror.model({
  name: "app",
  initialState: 0,
  reducers: {
    increment(state) { return state + 1 },
    decrement(state) { return state - 1 }
  },
  effects: {
    async incrementAsync() {
      await new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve()
        }, 1000)
      })
      actions.app.increment()
    }
  }
})

// connect state with component
const App = connect(state => {
  return {count: state.app}
})(props => (
    

      
{props.count}
      {/* dispatch the actions */}
       actions.app.decrement()}>-
       actions.app.increment()}>+
      {/* dispatch the async action */}
       actions.app.incrementAsync()}>+ Async
    
  )
)

// start the app，`render` is an enhanced `ReactDOM.render`
render(, document.getElementById("root"))

可以看出它們核心是把 Redux 分散的 actions 和 reducers 合并在一個(gè)地方，并減少了樣板代碼，而且自帶異步 action 解決方案，抽象為 effects。

說完第一個(gè)特點(diǎn)，接下來是第二個(gè)特點(diǎn)：“完美地支持 Typescript”。

為什么我這么這么執(zhí)著于 Typescript，使用過 Typescript 的都應(yīng)該知道，不過什么規(guī)模的項(xiàng)目，開發(fā)體驗(yàn)比使用 Javascript 好太多，沒入坑的同學(xué)可以去試試。

基于第一特點(diǎn)的篩選，原生 Redux 和 Mobx 已被忽略，對于dva、rematch、mirror，對 Typescript 支持最好的是 Rematch，它本身也是用 Typescript 寫的，遂繼續(xù)忽略 Dva 和 mirror。

在聊 Rematch 和 Typescript 一起使用之前，先了解一下原生 Redux 和 Typescript 怎么一起使用， 用使用頻率最高的 connect 舉個(gè)例子：

interface StateProps {
  count: number
}

interface DispatchProps {
  increment: () => void
}

interface OwnProps {
  name: string
}

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(MyComponent);

為了 MyComponent 的 props 能有正確的類型斷言，你必須手寫 StateProps 和 DispatchProps，這是一件很蛋疼的事情，也沒有體現(xiàn)出使用 Typescript 的優(yōu)勢所在。理想的應(yīng)該是 connect 之后 MyComponent 的 props 能被自動(dòng)推倒出來，這才是完美的開發(fā)體驗(yàn)。但是基于 hoc 的使用方式，這方面貌似暫時(shí)無解，除非使用 render props，但是 render props 的書寫方式真是有點(diǎn)辣眼睛。

再來看看 Rematch 和 Typescript 怎么一起使用：

import * as React from "react"
import { connect } from "react-redux"

import { iRootState, Dispatch } from "./store"

const mapState = (state: iRootState) => ({
    dolphins: state.dolphins,
    sharks: state.sharks,
})

const mapDispatch = (dispatch: Dispatch) => ({
    incrementDolphins: dispatch.dolphins.increment,
    incrementDolphinsAsync: dispatch.dolphins.incrementAsync,
    incrementSharks: () => dispatch.sharks.increment(1),
    incrementSharksAsync: () => dispatch.sharks.incrementAsync(1),
    incrementSharksAsync2: () => dispatch({ type: "sharks/incrementAsync", payload: 2 }),
})

type connectedProps = ReturnType & ReturnType
type Props = connectedProps

class Count extends React.Component {
  // ....
}

export default connect(mapState, mapDispatch)(Count)

跟原生的 Redux 基本大同小異，沒體現(xiàn) Typescript 的優(yōu)勢，有點(diǎn)強(qiáng)行上 Typescript 的感覺。

對我個(gè)人而言 Rematch 也無法滿足這兩個(gè)特點(diǎn)。

所以, 我決定自己造一個(gè):

stamen: 可能是基于 Hooks 和 Typescript 最好的狀態(tài)管理工具