這年頭，Redux 狀態管理框架滿天飛，前幾天在網上閑逛偶然又發現 Rematch、Mirror、Smox、Xredux，都用了一下，發現都是套瓷娃娃，大同小異，拿幾個比較歷害的來說：

• DvaJS Github Stars 12000+
• Rematch Github Stars 5000+
• Mirror Github Stars 1200+

無非就是類似這樣的：

model({state: ...,reducers: {aaa(playload)bbb(playload)},effects: {ccc(playload)ddd(playload)} }) 復制代碼

審美疲勞了？H 起來，給大家推薦一款小鮮肉React-coat：

項目地址：github.com/wooline/rea…

class ModuleHandlers extends BaseModuleHandlers {@reducerpublic aaa(playload): State {...}@reducerprivate bbb(playload): State {...}@effect("ajaxLoading")public async ccc(playload) {...}@effect("loginLoading")private async ddd(playload) {...} } 復制代碼

spring 風格？ng 風格？

可能你會說，用 Class 呀，不喜歡，我喜歡 FP 風格。我想說，這是狀態管理框架非 React UI 框架，不要為了流行 FP 就皆 FP，就象當年 JS 流行面向對象編程，把面向過程說成洪水猛獸。

武裝到牙齒的 TS 類型反射

React-coat 全面擁抱 Typescript，直接上圖：

action 調用時的類型反射：

動態加載模塊時的類型反射：

Store State 結構的類型反射：

連路由參數也有類型反射：

支持單頁 SPA 和服務器渲染 SSR 同構

• 而且SSR 在開發時也可以享受：“熱更新”
• 還支持 SPA(單頁) + SSR(服務器渲染)一鍵切換。

打開項目根下的./package.json，在"devServer"項中，將 ssr 設為 true 將啟用服務器渲染，設為 false 僅使用瀏覽器渲染

關于服務器渲染SSR請移步另一篇文章：juejin.im/post/5c7f6e…

強大而便捷的 Dispatch Action

對比一下各大框架 Dispatch Action 的語法：

// Dva中 yield put({type: 'moduleA/increment', payload: 2});// Rematch中 dispatch.moduleA.increment(2);// Mirror中 actions.moduleA.increment(2);// React-coat中 import moduleA from "modules/moduleA/facade"; ... await this.dispatch(moduleA.actions.increment(2)); 復制代碼

• 語法簡潔性上，Dva 用的 saga 中的 yield put，還要寫 type 和 payload，最繁瑣。其它三款都直接用方法調用，更簡潔。

• Rematch 和 Mirror 等于把所有 action 都放到一個全局變量中去了，而 React-coat 去中心化，按需引入 moduleA，更利于系統保持松散結構。

• 從語義上來說 React-coat 依然顯示的保留 dispatch 關鍵字，moduleA.actions.increment(2) 返回的是依然是 Action，dispatch(action) 作為 Redux 的基本理念得到完整的保持，Rematch 和 Mirror 已經變成傳統的 MVC 了。

• 從功能上，只有 Dva 和 React 支持同步 effect。其它兩款都不支持，或者是我沒發現？什么是同步 effect？例如：

  • query 會觸發一個 effect，updateState 會觸發一個 reducer
  • updateState 需要等待 query 執行完后再 dispatch
  // Dva中使用 saga 的 put.resolve 來支持同步 effect yield put.resolve({type: 'query',payload:1}); yield put({type: 'updateState', payload: 2}); 復制代碼// React-coat 中可以直接 awiat dispatch await this.dispatch(thisModule.actions.query(1)); this.dispatch(thisModule.actions.updateState(2)); 復制代碼

• React-coat 的獨有的殺手锏：action 名稱和參數的類型反射和智能提示、public private 權限的控制，讓你感受什么才叫真正的封裝。試想下如果多人同時并行開發多個模塊，你還需要為你的模塊寫一大篇 API 說明文檔么？

徹底的模塊化

既然是企業級應用，那模塊化自然是少不了的，包括模塊封裝、代碼分割、按需加載。模塊化的目的主要是拆分復雜系統、解耦與重用。

以上框架中，Rematch 和 Mirror 的模塊化功能比較弱，且不優雅，略過。Dva 和 React-coat 都有強大的模塊化功能，其中 Dva 可以搭配 UMI 來自動配置。

在 dva 中動態加載 model 和 component，要靠路由配置：

{path: '/user',models: () => [import(/* webpackChunkName: 'userModel' */'./pages/users/model.js')],component: () => import(/* webpackChunkName: 'userPage' */'./pages/users/page.js'), } 復制代碼

React-coat 中代碼分割和路由分層而治：

• 代碼分割只做代碼分割，不參和路由的事，因為模塊也不一定是非得用路由的方式來加載。
• 路由只做路由的事情，不參和代碼分割的事，因為模塊也不一定非得做代碼分割。
• 一個 Module 整體打包成一個 bundle，包括 model 和 views，不至于太碎片。

// 定義代碼分割 export const moduleGetter = {app: () => {return import(/* webpackChunkName: "app" */ "modules/app");},photos: () => {return import(/* webpackChunkName: "photos" */ "modules/photos");}, } 復制代碼

React-coat 中支持路由動態加載，也支持非路由動態加載

// 使用路由加載： const PhotosView = loadView(moduleGetter, ModuleNames.photos, "Main"); ... <Route exact={false} path="/photos" component={PhotosView} /> 復制代碼// 直接加載： const PhotosView = loadView(moduleGetter, ModuleNames.photos, "Main"); ... render() {const {showDetails} = this.props;return showDetails ? <DetailsView /> : <ListView />; } 復制代碼

• Dva 以 Page UI 主線來劃分模塊；React-coat 以業務功能高內聚、低偶合來劃分模塊。后者更適合解耦與重用。
• Dva 使用集中配置、將 Page、路由、model、代碼分割全部都集中寫在一個中心文件中；React-coat 去中心化，將各自的邏輯封裝在各自模塊中，并且 model、代碼分割、路由分層而治，互不干涉。后者更干凈整潔。
• Dva 將每個 model 和 component 都做成一個代碼分割包；React-coat 將一個 Module 整體做成一個代碼分割包，前者太碎，后者更符合 bundle 概念。
• React-coat 支持路由動態加載 View，也支持非路由動態加載 View，二條腿走路步子邁得更大。
• React-coat 動態加載 View 時會自動導入 Model，無需手工配置加載 Model，是真正的路由組件化。

更多差異還是請看：與 DvaJS 風云對話，是 DvaJS 挑戰者？還是又一輪子？

跨模塊的調用與協作

在復雜的長業務流程中，跨模塊調用與協作是少不了的，Dva、Rematch、Mirror、React-coat 都支持跨模塊派發 action，跨模塊讀取 State。比如：

// Mirror中 if(resphonse.success){actions.moduleA.doSomeEffect();actions.moduleB.doSomeEffect(); } 復制代碼

這是一種串聯調用的模式，適應于一些耦合緊密的業務流。 但對于一些松散耦合的業務流程，最佳的方式應當是觀察者模式，或叫事件廣播模式。

場景：當 moduleA 執行了一個 action，moduleB、moduleC、moduleD...都需要執行一些各自的動作

這就是 React-coat 獨有的殺手锏：ActionHandler 概念。

class ModuleB {//在ModuleB中監聽"ModuleA/update" actionasync ["ModuleA/update"] (){await this.dispatch(this.action.featchData())} }class ModuleC {//在ModuleC中監聽"ModuleA/update" actionasync ["ModuleA/update"] (){await this.dispatch(this.action.featchData())} } 復制代碼

React-coat 主動調用、事件廣播兩種模式都支持，二手都要抓，二手都要硬。就問你騷氣不騷氣？?

總結

以上是生活随笔為你收集整理的React状态管理大乱斗，横向对比Dva,Rematch,Mirror的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。