flutter_redux
作為工具類橋接Redux和Flutter,它提供了StoreProvider,StoreBuilder,StoreConnector等這些元件,使我們在flutter中使用redux變的很簡便。
常用的狀態管理工具都是基於InheritedWidget,redux也不例外,StoreProvider繼承於InheritedWidget並且在內部儲存著Store,來進行資料的儲存和更新,這樣可以通過getElementForInheritedWidgetOfExactType方法來方便獲取Provider中的store。
模式分析:
Redux 主要由3部分組成,Store、Action、Reducer。
- Store用於儲存和管理state;
- Action Store通過Action入參呼叫dispatch來進行狀態更新請求;
- Reducer和Middleware根據Action產生新的狀態,由於redux純函式的設計理念,reducer中一般不會處理非同步事件,middleware中介軟體比較適合。
從view到data,redux承接了整個控制構成,可以看出store在redux資料處理流程中是最關鍵的角色,結合原始碼,可以看出,在呼叫dispatch後,_changeController將reducer返回的新的state入參,進而向StreamBuilder輸出流,StoreStreamListener接收到流之後,重新整理頁面,完成整個資料重新整理過程。
NextDispatcher _createReduceAndNotify(bool distinct) {
return (dynamic action) {
final state = reducer(_state, action);
if (distinct && state == _state) return;
_state = state;
_changeController.add(state);
};
}
複製程式碼
BLoC
BLoC 庫中有三個主要的小部件:
-
Bloc
-
BlocBuilder
-
BlocProvider
模式分析
BlocBuilder
BlocBuilder是flutter_bloc提供的一個基礎元件,用於構建元件並響應元件新的狀態,它通常需要Bloc和builder兩個引數。BlocBuilder與StreamBuilder的作用一樣,但是它簡化了StreamBuilder的實現細節,減少一部分必須的模版程式碼。
Bloc
繼承使用,內建一個StreamController型別eventController進行流控制,可以直接呼叫add函式觸發流。
BlocProvider
內部同樣使用InheritedWidget實現。
實現流程
- 繼承Bloc實現核心類BlocVM,負責接受接受資料處理請求和觸發流。
- 提供provider進行Bloc的初始化
- 然後通過構建BlocBuilder來進行UI包裝,
- 通過BlocBuilder中提供的context (BlocProvider.of(context)) 來獲取Bloc
- 呼叫Bloc.add(event)觸發流,在mapEventToState函式中,對流事件event進行處理。
- 呼叫yield觸發流輸出,完成頁面頁面重新整理。
Provider
基於傳統的觀察者模式,入手簡單,和MVVM結合的很好,但是響應流的控制不是很健壯。
關鍵角色有 Provider,ChangeNotifier,Consumer。
模式分析:
Provider同樣需要一個ChangeNotifierProvider來進行構建,不同的是,本來做為child的view,需要封裝在一個Consumer,這樣看來真正負責重新整理構建的正是Consumer,內部,它通過Provider.of(context)獲取Provider。
實現流程:
- 實現一個繼承於ChangeNotifier的核心類,負責接受資料請求和完成通知。
- 頂層建立MultiProvider來初始化資料。
- 使用ChangeNotifierProvider建立和Consumer包裝view,並且傳入ChangeNotifier.
- view通過操縱ChangeNotifier來進行狀態管理。