# 為了弄懂Flutter的狀態管理, 我用10種方法改造了counter app 本文通過改造flutter的counter app, 展示不同的狀態管理方法的用法. 可以直接去demo地址看程式碼: https://github.com/mengdd/counter_state_management 切換分支對應不同的實現方式. ## Contents * Flutter中的狀態管理 - 狀態分類 - 狀態管理方法概述 * Counter sample預設實現: StatefulWidget * InheritedWidget * Scoped Model * Provider * BLoC - BLoC手動實現 - BLoC + InheritedWidget做傳遞 - BLoC rxdart實現 - BLoC用庫實現 * rxdart * Redux * MobX * Flutter Hooks * Demo說明及感想 ## Flutter State Management Flutter是描述性的(declarative), UI反映狀態. ``` UI = f(state) ``` 其中`f`代表了build方法. 狀態的改變會直接觸發UI的重新繪製. UI reacts to the changes. 相對的, Android, iOS等都是命令式的(imperative), 會有`setText()`之類的方法來改變UI. ### 狀態分類 狀態分兩種: * Ephemeral state: 有時也叫UI state或local state. 這種可以包含在單個widget裡. 比如: `PageView`的當前頁, 動畫的當前進度, `BottomNavigationBar`的當前選中tab. 這種狀態不需要使用複雜的狀態管理手段, 只要用一個`StatefulWidget`就可以了. * App state: 需要在很多地方共享的狀態, 也叫shared state或global state. 比如: 使用者設定, 登入資訊, 通知, 購物車, 新聞app中的已讀/未讀狀態等. 這種狀態分類其實沒有一個清晰的界限. 在簡單的app裡, 可以用`setState()`來管理所有的狀態; 在app需要的時候, tab的index也可能被抽取到外部作為一個需要儲存和管理的app state. ### 狀態管理方法 官方提供了一些options: [Flutter官方文件 options](https://flutter.dev/docs/development/data-and-backend/state-mgmt/options) 目前官方比較推薦的是provider. 各種狀態管理方法要解決的幾個問題: * 狀態儲存哪裡? * 狀態如何獲取? * UI如何更新? * 如何改變狀態? ## Counter Sample預設實現: StatefulWidget 新建Flutter app, 是一個counter app, 自動使用了`StatefulWidget`來管理狀態. 對這個簡單的app來說, 這是很合理的. 我們對這個app進行一個簡單的改造, 再增加一個button用來減數字. 同樣的方式, 只需要新增一個方法來做減法就可以了. 這種方法的一個變體是, 用`StatefulBuilder`, 主要好處是少寫一些程式碼. `StatefulWidget`對簡單的Widget內部狀態來說是合理的. 對於複雜的狀態, 這種方式的缺點: * 狀態屬性多了以後, 可能有很多地方都在呼叫`setState()`. * 不能把狀態和UI分開管理. * 不利於跨元件/跨頁面的狀態共享. (如何呼叫另一個Widget的`setState()`? 把方法通過構造傳遞過來? No, don't do this!) 千萬不要用全域性變數法來解決問題. 如果企圖用這種方式來管理跨元件的狀態, 就難免會用這些Anti patterns: * 緊耦合. Strongly coupling widgets. * 全域性儲存的state. Globally tracking state. * 從外部呼叫setState方法. Calling setState from outside. 所以這種方法只適用於local state的管理. * 程式碼分支1: [starter-code](https://github.com/mengdd/counter_state_management/blob/starter-code/lib/main.dart). * 程式碼分支2: [stateful-builder](https://github.com/mengdd/counter_state_management/tree/stateful-builder/lib/main.dart). ## InheritedWidget [InheritedWidget](https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html)的主要作用是在Widget樹中有效地傳遞資訊. 如果沒有`InheritedWidget`, 我們想把一個數據從widget樹的上層傳到某一個child widget, 要利用途中的每一個建構函式, 一路傳遞下來. Flutter中常用的`Theme`, `Style`, `MediaQuery`等就是inherited widget, 所以在程式裡的各種地方都可以訪問到它們. `InheritedWidget`也會用在其他狀態管理模式中, 作為傳遞資料的方法. ### InheritedWidget狀態管理實現 當用`InheritedWidget`做狀態管理時, 基本思想就是把狀態提上去. 當子widgets之間需要共享狀態, 那麼就把狀態儲存在它們共有的parent中. 首先定義一個`InheritedWidget`的子類, 包含狀態資料. 覆寫兩個方法: * 提供一個靜態方法給child用於獲取自己. (命名慣例`of(BuildContext)`). * 判斷是否發生了資料更新. ``` class CounterStateContainer extends InheritedWidget { final CounterModel data; CounterStateContainer({ Key key, @required Widget child, @required this.data, }) : super(key: key, child: child); @override bool updateShouldNotify(CounterStateContainer oldWidget) { return data.counter.value != oldWidget.data.counter.value; } static CounterModel of(BuildContext context) { return context .dependOnInheritedWidgetOfExactType() .data; } } ``` 之後用這個`CounterStateContainer`放在上層, 包含了資料和所有狀態相關的widgets. child widget不論在哪一層都可以方便地獲取到狀態資料. ``` Text( '${CounterStateContainer.of(context).counter.value}', ), ``` 程式碼分支: [inherited-widget](https://github.com/mengdd/counter_state_management/tree/inherited-widget). ### InheritedWidget缺點 `InheritedWidget`解決了訪問狀態和根據狀態更新的問題, 但是改變state卻不太行. * accessing state * updating on change * mutating state -> X 首先, 不支援跨頁面(route)的狀態, 因為widget樹變了, 所以需要進行跨頁面的資料傳遞. 其次, `InheritedWidget`它包含的資料是不可變的, 如果想讓它跟蹤變化的資料: * 把它包在一個`StatefulWidget`裡. * 在`InheritedWidget`中使用`ValueNotifier`, `ChangeNotifier`或steams. 這個方案也是瞭解一下, 實際的全域性狀態管理還是用更成熟的方案. 但是它的原理會被用到其他方案中作為物件傳遞的方式. ## Scoped Model scoped model是一個外部package: https://pub.dev/packages/scoped_model Scoped Model是基於`InheritedWidget`的. 思想仍然是把狀態提到上層去, 並且封裝了狀態改變的通知部分. ### Scoped Model實現 它官方提供例子就是改造counter: https://pub.dev/packages/scoped_model#-example-tab- * 新增scoped_model依賴. * 建立資料類, 繼承`Model`. ``` import 'package:scoped_model/scoped_model.dart'; class CounterModel extends Model { int _counter = 0; int get counter => _counter; void increment() { _counter++; notifyListeners(); } void decrement() { _counter--; notifyListeners(); } } ``` 其中資料變化的部分會通知listeners, 它們收到通知後會rebuild. 在上層初始化並提供資料類, 用`ScopeModel`. 訪問資料有兩種方法: * 用`ScopedModelDescendant`包裹widget. * 用`ScopedModel.of`靜態方法. 使用的時候注意要提供泛型型別, 會幫助我們找到離得最近的上層`ScopedModel`. ``` ScopedModelDescendant( builder: (context, child, model) { return Text( model.counter.toString(), ); }), ``` 資料改變後, 只有`ScopedModelDescendant`會收到通知, 從而rebuild. `ScopedModelDescendant`有一個`rebuildOnChange`屬性, 這個值預設是true. 對於button來說, 它只是控制改變, 自身並不需要重繪, 可以把這個屬性置為false. ``` ScopedModelDescendant( rebuildOnChange: false, builder: (context, child, model) { return FloatingActionButton( onPressed: model.increment, tooltip: 'Increment', child: Icon(Icons.add), ); }, ), ``` scoped model這個庫幫我們解決了資料訪問和通知的問題, 但是rebuild範圍需要自己控制. * access state * notify other widgets * minimal rebuild -> X -> 因為需要開發者自己來決定哪一部分是否需要被重建, 容易被忘記. 程式碼分支: [scoped-model](https://github.com/mengdd/counter_state_management/tree/scoped-model) ## Provider Provider是官方文件的例子用的方法. 去年的Google I/O 2019也推薦了這個方法. 和BLoC的流式思想相比, Provider是一個觀察者模式, 狀態改變時要`notifyListeners()`. 有一個counter版本的sample: https://github.com/flutter/samples/tree/master/provider_counter Provider的實現在內部還是利用了`InheritedWidget`. Provider的好處: dispose指定後會自動被呼叫, 支援`MultiProvider`. ### Provider實現 * model類繼承`ChangeNotifer`, 也可以用`with`. ``` class CounterModel extends ChangeNotifier { int value = 0; void increment() { value++; notifyListeners(); } void decrement() { value--; notifyListeners(); } } ``` * 資料提供者: `ChangeNotifierProvider`. ``` void main() => runApp(ChangeNotifierProvider( create: (context) => CounterModel(), child: MyApp(), )); ``` * 資料消費者/操縱者, 有兩種方式: `Consumer`包裹, 用`Provider.of`. ``` Consumer( builder: (context, counter, child) => Text( '${counter.value}', ), ), ``` FAB: ``` FloatingActionButton( onPressed: () => Provider.of(context, listen: false).increment(), ), ``` 這裡`listen`置為false表明狀態變化時並不需要rebuild FAB widget. ### Provider效能相關的實現細節 * `Consumer`包裹的範圍要儘量小. * listen變數. * child的處理. `Consumer`中builder方法的第三個引數. 可以用於快取一些並不需要重建的widget: ``` return Consumer( builder: (context, cart, child) => Stack( children: [ // Use SomeExpensiveWidget here, without rebuilding every time. child, Text("Total price: ${cart.totalPrice}"), ], ), // Build the expensive widget here. child: SomeExpensiveWidget(), ); ``` 程式碼分支: [provider](https://github.com/mengdd/counter_state_management/tree/provider). ## BLoC BLoC模式的全稱是: business logic component. 所有的互動都是a stream of asynchronous events. `Widgets + Streams = Reactive`. BLoC的實現的主要思路: Events in -> BloC -> State out. Google I/O 2018上推薦的還是這個, 2019就推薦Provider了. 當然也不是說這個模式不好, 架構模式本來也沒有對錯之分, 只是技術選型不同. ### BLoC手動實現 不新增任何依賴可以手動實現BLoC, 利用: * Dart SDK > dart:async > `Stream`. * Flutter的`StreamBuilder`: 輸入是一個stream, 有一個builder方法, 每次stream中有新值, 就會rebuild. 可以有多個stream, UI只在自己感興趣的資訊發生變化的時候重建. BLoC中: * 輸入事件: `Sink input`. * 輸出資料: `Stream output`. CounterBloc類: ``` class CounterBloc { int _counter = 0; final _counterStateController = StreamController(); StreamSink get _inCounter => _counterStateController.sink; Stream get counter => _counterStateController.stream; final _counterEventController = StreamController(); Sink get counterEventSink => _counterEventController.sink; CounterBloc() { _counterEventController.stream.listen(_mapEventToState); } void _mapEventToState(CounterEvent event) { if (event is IncrementEvent) { _counter++; } else if (event is DecrementEvent) { _counter--; } _inCounter.add(_counter); } void dispose() { _counterStateController.close(); _counterEventController.close(); } } ``` 有兩個`StreamController`, 一個控制state, 一個控制event. 讀取狀態值要用`StreamBuilder`: ``` StreamBuilder( stream: _bloc.counter, initialData: 0, builder: (BuildContext context, AsyncSnapshot snapshot) { return Text( '${snapshot.data}', ); }, ) ``` 而改變狀態是傳送事件: ``` FloatingActionButton( onPressed: () => _bloc.counterEventSink.add(IncrementEvent()), ), ``` 實現細節: * 每個螢幕有自己的BLoC. * 每個BLoC必須有自己的`dispose()`方法. -> BLoC必須和`StatefulWidget`一起使用, 利用其生命週期釋放. 程式碼分支: [bloc](https://github.com/mengdd/counter_state_management/tree/bloc) ### BLoC傳遞: 用InheritedWidget 手動實現的BLoC模式, 可以結合`InheritedWidget`, 寫一個Provider, 用來做BLoC的傳遞. 程式碼分支: [bloc-with-provider](https://github.com/mengdd/counter_state_management/tree/bloc-with-provider) ### BLoC rxdart實現 用了rxdart package之後, bloc模組的實現可以這樣寫: ``` class CounterBloc { int _counter = 0; final _counterSubject = BehaviorSubject(); Stream get counter => _counterSubject.stream; final _counterEventController = StreamController(); Sink get counterEventSink => _counterEventController.sink; CounterBloc() { _counterEventController.stream.listen(_mapEventToState); } void _mapEventToState(CounterEvent event) { if (event is IncrementEvent) { _counter++; } else if (event is DecrementEvent) { _counter--; } _counterSubject.add(_counter); } void dispose() { _counterSubject.close(); _counterEventController.close(); } } ``` `BehaviorSubject`也是一種`StreamController`, 它會記住自己最新的值, 每次註冊監聽, 會立即給你最新的值. 程式碼分支: [bloc-rxdart](https://github.com/mengdd/counter_state_management/tree/bloc-rxdart). ### BLoC Library 可以用這個package來幫我們簡化程式碼: https://pub.dev/packages/flutter_bloc 自己只需要定義Event和State的型別並傳入, 再寫一個邏輯轉化的方法: ``` class CounterBloc extends Bloc { @override CounterState get initialState => CounterState.initial(); @override Stream mapEventToState(CounterEvent event) async* { if (event is IncrementEvent) { yield CounterState(counter: state.counter + 1); } else if (event is DecrementEvent) { yield CounterState(counter: state.counter - 1); } } } ``` 用`BlocProvider`來做bloc的傳遞, 從而不用在建構函式中一傳到底. 訪問的時候用`BlocBuilder`或`BlocProvider.of(context)`. ``` BlocBuilder( bloc: BlocProvider.of(context), builder: (BuildContext context, CounterState state) { return Text( '${state.counter}', ); }, ), ``` 這裡bloc引數如果沒有指定, 會自動向上尋找. `BlocBuilder`有一個引數`condition`, 是一個返回bool的函式, 用來精細控制是否需要rebuild. ``` FloatingActionButton( onPressed: () => BlocProvider.of(context).add(IncrementEvent()), ), ``` 程式碼分支: [bloc-library](https://github.com/mengdd/counter_state_management/tree/bloc-library). ## rxdart 這是個原始版本的流式處理. 和BLoC相比, 沒有專門的邏輯模組, 只是改變了資料的形式. 利用rxdart, 把資料做成流: ``` class CounterModel { BehaviorSubject _counter = BehaviorSubject.seeded(0); get stream$ => _counter.stream; int get current => _counter.value; increment() { _counter.add(current + 1); } decrement() { _counter.add(current - 1); } } ``` 獲取資料用`StreamBuilder`, 包圍的範圍儘量小. ``` StreamBuilder( stream: counterModel.stream$, builder: (BuildContext context, AsyncSnapshot snapshot) { return Text( '${snapshot.data}', ); }, ), ``` Widget dispose的時候會自動解綁. 資料傳遞的部分還需要進一步處理. 程式碼分支: [rxdart](https://github.com/mengdd/counter_state_management/tree/rxdart). ## Redux Redux是前端流行的, 一種單向資料流架構. 概念: * `Store`: 用於儲存`State`物件, 代表整個應用的狀態. * `Action`: 事件操作. * `Reducer`: 用於處理和分發事件的方法, 根據收到的`Action`, 用一個新的`State`來更新`Store`. * `View`: 每次Store接到新的State, `View`就會重建. `Reducer`是唯一的邏輯處理部分, 它的輸入是當前`State`和`Action`, 輸出是一個新的`State`. ### Flutter Redux狀態管理實現 首先定義好action, state: ``` enum Actions { Increment, Decrement, } class CounterState { int _counter; int get counter => _counter; CounterState(this._counter); } ``` reducer方法根據action和當前state產生新的state: ``` CounterState reducer(CounterState prev, dynamic action) { if (action == Actions.Increment) { return new CounterState(prev.counter + 1); } else if (action == Actions.Decrement) { return new CounterState(prev.counter - 1); } else { return prev; } } ``` * 資料提供者: `StoreProvider`. 放在上層: ``` StoreProvider( store: store, child: MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ), ); ``` * 資料消費者: `StoreConnector`, 可讀可寫. 讀狀態: ``` StoreConnector( converter: (store) => store.state.counter.toString(), builder: (context, count) { return Text( '$count', ); }, ) ``` 改變狀態: 傳送action: ``` StoreConnector( converter: (store) { return () => store.dispatch(action.Actions.Increment); }, builder: (context, callback) { return FloatingActionButton( onPressed: callback, ); }, ), ``` 程式碼分支: [redux](https://github.com/mengdd/counter_state_management/tree/redux). ## MobX MobX本來是一個JavaScript的狀態管理庫, 它遷移到dart的版本: [mobxjs/mobx.dart](https://github.com/mobxjs/mobx.dart). 核心概念: * Observables * Actions * Reactions ### MobX狀態管理實現 官網提供了一個counter的指導: https://mobx.netlify.com/getting-started 這個庫的實現需要先生成一些程式碼. 先寫類: ``` import 'package:mobx/mobx.dart'; part 'counter.g.dart'; class Counter = _Counter with _$Counter; abstract class _Counter with Store { @observable int value = 0; @action void increment() { value++; } @action void decrement() { value--; } } ``` 執行命令`flutter packages pub run build_runner build`, 生成`counter.g.dart`. 改完之後就不需要再使用`StatefulWidget`了. 找一個合適的地方初始化資料物件並儲存: ``` final counter = Counter(); ``` 讀取值的地方用`Observer`包裹: ``` Observer( builder: (_) => Text( '${counter.value}', style: Theme.of(context).textTheme.display1, ), ), ``` 改變值的地方: ``` FloatingActionButton( onPressed: counter.increment, tooltip: 'Increment', child: Icon(Icons.add), ), ``` 程式碼分支: [mobx](https://github.com/mengdd/counter_state_management/tree/mobx). ## Flutter hooks React hooks的Flutter實現. package: https://pub.dev/packages/flutter_hooks Hooks存在的目的是為了增加widgets之間的程式碼共享, 取代`StatefulWidget`. 首頁的例子是: 對一個使用了`AnimationController`的`StatefulWidget`的簡化. flutter_hooks包中已經內建了一些已經寫好的hooks. ### Flutter hooks useState counter demo一個最簡單的改法, 就是將`StatefulWidget`改為`HookWidget`. 在`build`方法裡: ``` final counter = useState(0); ``` 呼叫`useState`方法設定一個變數, 並設定初始值, 每次值改變的時候widget會被rebuild. 使用值: ``` Text( '${counter.value}', ), ``` 改變值: ``` FloatingActionButton( onPressed: () => counter.value++, ), ``` 實際上是把`StatefulWidget`包裝了一下, 在初始化Hook的時候註冊了listener, 資料改變的時候呼叫`setState()`方法. 只是把這些操作藏在hook裡, 不需要開發者手動呼叫而已. 所以本質上還是`StatefulWidget`, 之前解決不了的問題它依然解決不了. 程式碼分支: [flutter-hooks](https://github.com/mengdd/counter_state_management/tree/flutter-hooks). ## Demo 本文demo地址: https://github.com/mengdd/counter_state_management 每個分支對應一種實現. 切換不同分支檢視不同的狀態管理方法. 對於程式碼的說明: 這是counter app用不同的狀態管理模式進行的改造. 因為這個demo的邏輯和UI都比較簡單, 可能實際上並不需要用上一些複雜的狀態管理方法, 有種殺雞用牛刀的感覺. 只是為了保持簡單來突出狀態管理的實現, 說明用法. ## 一些自己的感想 老實說, 做了這麼多年Android, 各種構架MVP, MVVM, MVI, 目的就是資料和邏輯分離, 邏輯和UI分離, 所以初識Flutter的時候對這種萬物皆widget, 一個樹裡面包含一切的方式有點懷疑, UI邏輯資料寫成一堆, 程式功能複雜後, 肯定會越寫越亂. 但是瞭解了它的狀態管理之後, 發現Flutter的狀態管理就是它的程式構架, 並且也是百家爭鳴各取所需. 只是Flutter的構架是服務於Flutter framework的設計思想的, 要遵從利用它, 而不是與之反抗. 愛它如是, 而不是如我所願. 印證了一些道理: * 不要只喜歡自己熟悉的東西. * 瞭解之後才有發言權. ## 參考 * [Flutter官方文件](https://flutter.dev/docs/development/data-and-backend/state-mgmt) * [Flutter官方文件 options](https://flutter.dev/docs/development/data-and-backend/state-mgmt/options) * [Flutter Architecture Samples](http://fluttersamples.com/) * [Flutter State Management - The Grand Tour](https://www.youtube.com/watch?v=3tm-R7ymwhc) ### Google I/O * [Build reactive mobile apps with Flutter (Google I/O'18)](https://www.youtube.com/watch?v=RS36gBEp8OI) * [Pragmatic State Management in Flutter (Google I/O'19)](https://www.youtube.com/watch?v=d_m5csmrf7I) ### InheritedWidget * [InheritedWidget](https://api.flutter.dev/flutter/widgets/InheritedWidget-class.html) * [Flutter實戰 7.2 資料共享（InheritedWidget）](https://book.flutterchina.club/chapter7/inherited_widget.html) ### Scoped Model * [scoped_model package](https://pub.dev/packages/scoped_model) ### provider * [Flutter guide](https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple) * [Flutter samples: provider shopper](https://github.com/flutter/samples/tree/master/provider_shopper) * [Flutter實戰 7.3 跨元件狀態共享（Provider）](https://book.flutterchina.club/chapter7/provider.html) ### Bloc * [Build reactive mobile apps in Flutter — companion article](https://medium.com/flutter/build-reactive-mobile-apps-in-flutter-companion-article-13950959e381) * [filiph/state_experiments](https://github.com/filiph/state_experiments) * [Flutter BLoC Pattern](https://www.youtube.com/watch?v=oxeYeMHVLII&list=PLB6lc7nQ1n4jCBkrirvVGr5b8rC95VAQ5) * [Getting Started with the BLoC Pattern](https://www.raywenderlich.com/4074597-getting-started-with-the-bloc-pattern) * [Effective BLoC pattern](https://medium.com/flutterpub/effective-bloc-pattern-45c36d76d5fe) ### Redux * [Introduction to Redux in Flutter](https://blog.novoda.com/introduction-to-redux-in-flutter/) * [flutter redux package](https://pub.dev/packages/flutter_redux) * [flutter redux github](https://github.com/brianegan/flutter_redux) ### MobX * [mobx github](https://github.com/mobxjs/mobx.dart)