為啥要使用Fish redux

1，年前就被閑魚大佬安利，種草已久

2，想要對比Flutter Redux，學習體會它帶來的優越性

3，參與并支持一下國產，現在Flutter生態還在早期

準備工作

1，Redux.js 文檔

2，Fish Redux 文檔

3，Pub使用文檔

萌新（沒接觸過Redux）：建議按順序看一遍，磨刀不費砍柴功，扎實的理論基礎是很有用處的

熟練玩家（Demo用過Redux）：建議把Fish Redux文檔的簡介和Component看下，尤其是Component，這是它獨特的地方

老司機（項目中用過Redux.js或Flutter Redux）：可以重點看下Component中的Effect，Dependencies，Page，還有Adapter

在看文檔時，可以把Fish Redux項目Clone下來，先把Example改下跑跑看，再對著源碼理解下文檔中的概念。

重要概念

當然以下概念還是需要理解的：

Action

Action定義一種行為，可以攜帶信息，發往Store。換言之Store發生改變須由Action觸發，Fish redux 有以下約定：Action 包含兩個字段type和payload；推薦寫法是在action.dart里定義一個type枚舉類和一個ActionCreator類，這樣有利于約束payload的類型。

Reducer/Effect

這兩個函數都是用來處理數據的函數，Reducer是純函數響應Action對Store數據進行改變。Effect用來處理來自視圖的意圖，如點擊事件，發起異步請求，這些有副作用的操作。

Page

可以看成是一個容器，它用來配置聚合State，Effect，Reduce，View，Dependencies等

• 一個頁面內都有且僅有一個 Store（意思是會有好多個Store，這是區別于Flutter Redux的）
• Page 繼承于 Component，所以它能配置所有 Component 的要素（意思是比Component多了Middleware和initState）
• Page 能配置 Middleware，用于對 Redux 做 AOP 管理（意思是可以無侵入的實現一些如log打印，性能分析這樣的通用功能。中間件定義是可插拔，可疊加，但不會改變事件流程）
• Page 必須配置一個初始化頁面數據的初始化函數initState（頁面有初始數據是必須的吧）

Adapter（可選）

這個不是必須，但確實很屌，很好用，使用和Android的老配方差不多，妙在效果拔群。有追求的可以看下歷史和原理，當然還有源碼。

有這些儲備，那么可以開始寫代碼了

接入

1，創建一個flutter project，按照文檔加入依賴

2，按照定義（當然也可以對著Example）分別創建Action，State，Effect，Reducer，View，Page這幾個文件，并寫套路代碼。

3，運行代碼觀察效果

個人體驗

1，集中，分治

Fish Redux完整復刻了Redux.js的核心概念，狀態是一顆State樹，完整體現[Predictable],[Centralized],[Debuggable],[Flexible]，數據狀態是由Redux集中管理的。分治是分而治之，把一個大的問題拆解成若干獨立的小問題去解決，比如Effect的實現和Component的封裝，一個頁面可以由多個Component和Effect共同組成，分治帶來的一個額外好處是提高了內聚性和可復用性。

2，Adapter

個人認為這是閑魚團隊基于現實業務的一個很重要創造，Listview可以占到一個應用的50%以上界面，它的體驗至關重要。事實證明Adapter封裝的很友好，性能也很突出，在Demo上就可以明顯對比出來，很妙。

3，文檔

這點是可以理解一下的，畢竟剛開源。現狀是注釋少，好多模塊還沒有。文檔有，但不太具體生動，友好，讀者沒帶入容易字都認識，但看幾遍還不解其意。

問題

1，Fish Redux 一個頁面一個Store的資源開銷？

用Observatory查看，單個實例引用并不大，而且退出頁面store實例被回收，理論上資源比flutter redux還少一點。

2，Store的生命周期，應用的一些長期共用數據怎么維護？

可以用createStore創建一個store作為單例維護，參考。

本文源碼地址：https://github.com/hyjfine/flutter_redux_sample/tree/fish-redux-adapter

（完）

@子路宇, 本文版權屬于再惠研發團隊，歡迎轉載，轉載請保留出處。

轉載于:https://juejin.im/post/5c91a7cae51d45074f71afb5

總結

以上是生活随笔為你收集整理的Fish Redux 使用指南的全部內容，希望文章能夠幫你解決所遇到的問題。

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