Fish Redux系列學習之初探

前言: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理解,接下來我們看具體的代碼。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章