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，運行代碼觀察效果

我的體驗

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

（完）

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