Flutter 狀態管理之 Redux,BLoC,Provider 的流程分析

雨三樓發表於2021-03-25

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中介軟體比較適合。

20210204200026.jpg

從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

模式分析

image.png

BlocBuilder

BlocBuilder是flutter_bloc提供的一個基礎元件,用於構建元件並響應元件新的狀態,它通常需要Bloc和builder兩個引數。BlocBuilder與StreamBuilder的作用一樣,但是它簡化了StreamBuilder的實現細節,減少一部分必須的模版程式碼。

Bloc

繼承使用,內建一個StreamController型別eventController進行流控制,可以直接呼叫add函式觸發流。

BlocProvider

內部同樣使用InheritedWidget實現。

實現流程

  1. 繼承Bloc實現核心類BlocVM,負責接受接受資料處理請求和觸發流。
  2. 提供provider進行Bloc的初始化
  3. 然後通過構建BlocBuilder來進行UI包裝,
  4. 通過BlocBuilder中提供的context (BlocProvider.of(context)) 來獲取Bloc
  5. 呼叫Bloc.add(event)觸發流,在mapEventToState函式中,對流事件event進行處理。
  6. 呼叫yield觸發流輸出,完成頁面頁面重新整理。

Provider

基於傳統的觀察者模式,入手簡單,和MVVM結合的很好,但是響應流的控制不是很健壯。

關鍵角色有 Provider,ChangeNotifier,Consumer。

模式分析:

image.png

Provider同樣需要一個ChangeNotifierProvider來進行構建,不同的是,本來做為child的view,需要封裝在一個Consumer,這樣看來真正負責重新整理構建的正是Consumer,內部,它通過Provider.of(context)獲取Provider。

實現流程:

  1. 實現一個繼承於ChangeNotifier的核心類,負責接受資料請求和完成通知。
  2. 頂層建立MultiProvider來初始化資料。
  3. 使用ChangeNotifierProvider建立和Consumer包裝view,並且傳入ChangeNotifier.
  4. view通過操縱ChangeNotifier來進行狀態管理。

相關文章