Fish Redux 是一個基於 Redux 數據管理的組裝式 flutter 應用框架， 它特別適用於構建中大型的複雜應用。

它的特點是配置式組裝。 一方面我們將一個大的頁面，對視圖和數據層層拆解為互相獨立的 Component|Adapter，上層負責組裝，下層負責實現； 另一方面將 Component|Adapter 拆分為 View，Reducer，Effect 等相互獨立的上下文無關函數。

所以它會非常乾淨，易維護，易協作。

Fish Redux 的靈感主要來自於 Redux， Elm， Dva 這樣的優秀框架。而 Fish Redux 站在巨人的肩膀上，將集中，分治，複用，隔離做的更進一步。

Fish Redux

ish-redux 是一個不斷演進的框架，甚至是在不斷的回爐重造，在這個過程中

• 第一個版本是基於社區內的 flutter_redux 進行的改造，核心是提供了 UI 代碼的組件化，當然問題也非常明顯，針對複雜的業務場景，往往業務邏輯很多，無法做到邏輯代碼的分治和複用。
• 第二個版本針對第一個版本的問題，做出了比較重大的修改，解決了 UI 代碼和邏輯代碼的分治問題，但設計上打破了 redux 的原則，丟失了 Redux 的精華。
• 在第三個版本進行重構時，我們確立了整體的架構原則與分層要求，一方面按照 reduxjs 的代碼進行了 flutter 側的 redux 實現，將 redux 完整保留下來。另一方面針對組件化的問題，提供了 redux 之上的 component 的封裝，並創新的通過這一層的架構設計提供了業務代碼分治的能力。第三版 完成了 Redux， Component 兩層的設計，其中包含了 Connector，Dependencies，Context 等重要概念。3.1 解決集中和分治的矛盾的核心在於 Connector3.2 這一層的組件的分治是面向通用設計的。通過在 Dependencies 配置 slots，得到了可插拔的組件系統。
• 在第三個版本 Redux & Component 之外，提供了面向 ListView 場景的分治設計 Adapter。解決了在面向 ListView 場景下的邏輯的分治和性能降低的矛盾。what's-adapter

目前，fish redux 已經在閒魚線上穩定運行，未來，期待 fish redux 給社區帶來更多的輸入。

直接使用 flutter 會面臨的問題？

flutter 是 google 推出的新一代跨平臺渲染框架. 它幫助開發者解決了跨平臺，高性能，富有表現力和靈活的 UI 表達，快速開發等核心問題。 但是如果開發大應用，還需要解決以下問題。

數據流問題通信問題可插拔的組件系統展示和邏輯解耦統一的編程模型和規範

我們可以類比 flutter 和 React，事實上在中大型應用中 React 會面臨的絕大多數問題，flutter 也同樣面臨考驗。

數據流問題

目前社區流行的數據流方案有： 單向數據流方案，以 Redux 為代表 響應式數據流方案，以 Mobx 為代表 其他，以 rxjs 為代表 那麼哪一種架構最合適 flutter ？ 我們追隨了 javascript 棧絕大多數開發者的選擇 - ReduxJs 感謝 ReduxJs，我們是幾乎 100%的還原了它在 dart 上的實現。所以我們也繼承了它的優點：[Predictable],[Centralized],[Debuggable],[Flexible]。

通信問題

直接使用 flutter，在 Widgets 之間傳遞狀態和回調，隨著應用複雜度的上升，會變成是一件可怕而糟糕的事情。 通過 fish redux，依託於集中的 Redux 和分治的 Effect 模塊，通過一個極簡的 dispatch-api，完成所有的通信的訴求。

可插拔的組件系統

fish redux 通過一個配置式的 Dependencies，來完成靈活的可插拔的組件系統。同時有這一配置的存在，它解放了我們手動拼裝 Reducer 的繁瑣工作。 參考:

what's-connectorconnectordependenciescomponentadapterwhat's-adapter

展示和邏輯解耦

fish redux 從 elm 中得到了非常多的設計靈感。 將一個組件，拆分為相互獨立的 View，Effect，Reducer 三個函數，我們優雅的解決了展示和邏輯解耦的問題。 通過這樣的拆分，我們將 UI 的表達隔離於一個函數內，它讓我們更好的面向未來，一份 UI 表達它可能來自於開發者，可能來自於深度學習框架的 UI 代碼生成，可能是面向移動終端，也可能是面向瀏覽器。它讓我們有了更多的組合的可能。 同時函數式的編程模型帶來了更容易編寫，更容易擴展，更容易測試，更容易維護等特性。

Fish Redux 使用指南

為啥要使用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，運行代碼觀察效果

閱讀更多 技術剛剛好 的文章

關鍵字: Android 設計 創建