前言:fishredux是閒魚出的一款Flutter框架,是爲了解決業務代碼耦合嚴重,可維護性差而出的一個基於redux數據管理的組裝式flutter應用框架,適合用於構建大中型的複雜應用。
特點:配置式組裝
fishredux把一個大的頁面拆解成兩部分,把視圖與數據層拆解爲相互獨立的component(adapter),另外一方面又將component(adapter)拆成view、reducer、effect等相互獨立的且與上下文無關函數。fishredux的靈感主要來自於redux、react、elm、dva這樣優秀的簽訂框架,在此之上,將集中,分治,複用,隔離做得更進一步。
流程圖
以下是單個頁面的流程圖。
從上圖中我們可以看出,一個page由view、state、effect、reducer等組成。
當用戶進行某個按鈕(操作)的時候,調用context.dispatch方法發送一個由ActionCreator創建的action,effect接受這個action並進行處理,然後effect再將這個action dispatch給reducer,reducer接收併產生一個新的state,state更新界面view的刷新。
理解redux
Redux 是來自前端社區的一個數據管理框架,它是一個用來做可預測易調試的數據管理的框架。所有對數據的增刪改查等操作都由 Redux 來集中負責。fishredux中的State、Action、Reducer、Store、Middleware 概念和社區的 ReduxJS 完全一致。
如果想對 Redux 有更近一步的理解,請參考 redux
Component:
Component即組件,它是對局部的展示和功能的封裝。 基於 Redux 的原則,我們對功能細分爲修改數據的功能(Reducer)和非修改數據的功能(副作用 Effect)。
於是我們得到了,View、 Effect、Reducer 三部分,稱之爲組件的三要素,分別負責了組件的展示、非修改數據的行爲、修改數據的行爲。
即:
View:組件的展示
Effect:非修改數據的功能
Reducer:修改數據的行爲
View:
View 只是一個函數簽名: (T,Dispatch,ViewService) => Widget
功能:
1 視圖是完全由數據驅動。
2 視圖產生的事件/回調,通過 Dispatch 發出“意圖”,不做具體的實現。
3 需要用到的組件依賴等,通過 ViewService 標準化調用。
Effect
Effect 是一個函數簽名: (Context, Action) => Object
功能:
接收來自 View 的“意圖”,也包括對應的生命週期的回調,然後做出具體的執行。
它的處理可能是一個異步函數,數據可能在過程中被修改,所以我們不崇尚持有數據,而通過上下文來獲取最新數據。
它不修改數據, 如果修要,應該發一個 Action 到 Reducer 裏去處理。
Reducer
Reducer 是一個完全符合 Redux 規範的函數簽名:(T,Action) => T
功能:
接收來自Effect中的意圖,進行具體數據操作
以上就是簡單的閒魚宣傳中簡單的fishredux理解,接下來我們看具體的代碼。