fish redux 個人理解

fish redux 理解

fish redux是什么

Fish Redux 是一個基於 Redux 數據管理的組裝式 flutter 應用框架， 它特別適用於構建中大型的復雜應用。
它的特點是配置式組裝。 一方面我們將一個大的頁面，對視圖和數據層層拆解為互相獨立的 Component|Adapter，上層負責組裝，下層負責實現； 另一方面將 Component|Adapter 拆分為 View，Reducer，Effect 等相互獨立的上下文無關函數。
所以它會非常干凈，易維護，易協作。
Fish Redux 的靈感主要來自於 Redux， Elm， Dva 這樣的優秀框架。而 Fish Redux 站在巨人的肩膀上，將集中，分治，復用，隔離做的更進一步。

fish redux 干什么用的

fish redux 用作flutter項目中的狀態管理，在我看來，它可以作為組織Flutter頁面的利器。就目前flutter頁面 如果把每一個widget都放到一個dart文件中，在閱讀源碼以及后續的維護上都是非常困難的一件事，使用fish redux就可以打破這種局面，頁面中每個Component 都單獨出來，清爽了許多。

fish redux 怎么用

1. 理解fish redux的組成

   模塊名稱	作用
   store	根據繼承關系而來的狀態樹
   state	保存頁面狀態（例如 主題色）
   Action	動作（例如添加）
   Effect/Reducer	處理Action（根據不同的action，修改與action相對應的state）返回新state時fish redux層層通知修改頁面狀態 兩者的區別： 舉個例子： Effect處理類似 頁面初始化的時候對state 數據做的一些修改 或者 異步請求這些東西 >Reducer 處理類似 單擊頁面中某按鈕，修改主題色這樣的動作
   view	繪制頁面
   Adapter	適配器【主要用於頁面中包含 Lisview,適配ListView中每一項，比較特殊】
   Connector	連接 【描述了主頁面的state與頁面中的Component的關系】，從page state中存取與之關聯的Component的狀態。
   Component	頁面小部件，組成page的一部分
   page	對以上內容的組裝描述

2.解讀fish redux github上提供的示例，地址：https://github.com/alibaba/fish-redux/tree/master/example

​看圖理解 ：上圖是example的一個項目結構圖，立體的畫出來理解起來更容易一點
global store,里邊保存了 根狀態 ，這個根狀態目前只有主題顏色 ，state樹 store
一個 修改主題的action 一個執行修改主題的Reducer
list頁面繼承了根state, 同時有自己的狀態 toDos【ListView中的數據】,數據展示流程是，在effect中執行頁面初始化
Lifecycle.initState 初始化數據A，通過執行動作initToDosAction，傳遞數據A修改state中的todos 返回新狀態【更新狀態≈更新頁面視圖】， 緊接着頁面加載的時候state中的toDos不為空加載出來想要展示的數據
進入page.dart dependencies里邊有兩項比較重要，第一個是adapter 適配器，我的理解中這個就是為listview而生的，通過指定conn 和和與之對應的的Adapter，聲明一個連接了生成ListItem的companent和連接，conn就是pagestate與ListItem的關系，示例中的是： NoneConn () + ToDoListAdapter(), 在ToDoListAdapter中指定了 ToDoComponent【ListItem】的companent，並且制定了兩者之間的connect ,從page的 state.toDos里邊取小數據List ，把小數據寫入到“大”數據... 這個比較特殊 是專門處理listview的
另外一個是slots ，這里是一個connect加一個component這個好理解一點，就是通過connect連接pagestate和component，connector中聲明了外層page與component中state的關系 ，目前最多支持6個參數，這里的參數可以自定義，所以6個足夠用了，不夠用就把某個改成類...
想要從根節點修改：
例如修改主題：
GlobalStore.store.dispatch(GlobalActionCreator.onchangeThemeColor());