接上一篇 Flutter状态管理之路（一），主要针对一些三方库来继续聊聊解决方案，介绍scope_model、provider、flutter_redux
ScopedModel
版本：1.0.1
这个库封装的比较简易，看例子就直接上关键源码吧
使用
如下例子来自官方demo
class CounterModel extends Model {
int _counter = 0;
int get counter => _counter;
void increment() {
// First, increment the counter
_counter++;
// Then notify all the listeners.
notifyListeners();
}
}
//在入口处也需要将根组件抱在ScopedModel中，这样就可以正常工作了。
class CounterApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new ScopedModel<CounterModel>(
model: new CounterModel(),
child: new Column(children: [
new ScopedModelDescendant<CounterModel>(
builder: (context, child, model) => new Text('${model.counter}'),
),
new Text("Another widget that doesn't depend on the CounterModel")
])
);
}
}
关键对象
Model
abstract class Model extends Listenable {
final Set<VoidCallback> _listeners = Set<VoidCallback>(); /// 注册观察者函数句柄
int _version = 0;
int _microtaskVersion = 0;
@override
void addListener(VoidCallback listener) { /// 添加观察者
_listeners.add(listener);
}
@override
void removeListener(VoidCallback listener) { /// 去除观察者
_listeners.remove(listener);
}
int get listenerCount => _listeners.length;
@protected
void notifyListeners() { /// 遍历通知观察者
if (_microtaskVersion == _version) {
_microtaskVersion++;
scheduleMicrotask(() {
_version++;
_microtaskVersion = _version;
_listeners.toList().forEach((VoidCallback listener) => listener());
});
}
}
}
如上，其实就是观察者模式，在子类的setter方法里调用下notify通知订阅的Widget
ScopedModelDescendant
用来向上搜索从ScopedModel（继承InheritedWidget）中获取状态，由于InheritedWidget
class ScopedModelDescendant<T extends Model> extends StatelessWidget {
final ScopedModelDescendantBuilder<T> builder;
final Widget child;
final bool rebuildOnChange;
ScopedModelDescendant({
@required this.builder,
this.child,
this.rebuildOnChange = true,
});
@override
Widget build(BuildContext context) {
return builder(
context,
child, /// 缓存child机制
ScopedModel.of<T>(context, rebuildOnChange: rebuildOnChange), /// 向上获取InheritedWidget来获取状态
);
}
}
ScopedModel
主要利用AnimatedBuilder和Listenable配合实现通知订阅，里面还使用了自定义的InheritedWidget(即_InheritedModel)来存储Model，向下暴露
class ScopedModel<T extends Model> extends StatelessWidget {
final T model;
final Widget child;
ScopedModel({@required this.model, @required this.child})
: assert(model != null),
assert(child != null);
@override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: model,
builder: (context, _) => _InheritedModel<T>(model: model, child: child),
);
}
总结
优点：
- 自动订阅
- 可跨组件传递状态
- 简单易用，对前端开发者来说学习成本几乎为零
缺点：
- 无法分离视图逻辑和业务逻辑
-
ScopedModel其实只是将InheritedWidget简单的封装了一下，局限性较大
Provider
版本：4.0.1
一个DI依赖注入和状态管理的框架
使用
来自官方计数器Demo
void main() => runApp(MyApp());
/// 1.定义状态Model
class Counter with ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => Counter()), /// 2. 在树根注入状态
],
child: MaterialApp(
home: Consumer<Counter>( /// 3. 利用Consumer组件自动获取counter
builder: (context, counter, _) {
return MaterialApp(
home: const MyHomePage(),
);
},
),
)
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("")),
body: const Center(child: CounterLabel()),
floatingActionButton: const IncrementCounterButton(),
);
}
}
class IncrementCounterButton extends StatelessWidget {
const IncrementCounterButton({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return FloatingActionButton(
onPressed: () {
Provider.of<Counter>(context, listen: false).increment(); /// 4. 获取使用(不加入监听)
},
tooltip: 'Increment',
child: const Icon(Icons.add),
);
}
}
class CounterLabel extends StatelessWidget {
const CounterLabel({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
final counter = Provider.of<Counter>(context); /// 5. 获取使用(加入监听)
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Text(
'You have pushed the button this many times:',
),
Text(
'${counter.count}',
),
],
);
}
}
流程图
provider流程.png
核心实现
关于Provider的源码实现，这里推荐阅读 跨组件状态共享（Provider），文章将主要的内容都剥离出来带着实现了一遍
总结
优点：
利用child缓存机制优化了InheritedWidget的全量build缺点
我们的业务代码更关注数据了，只要更新Model，则UI会自动更新，而不用在状态改变后再去手动调用
setState()来显式更新页面。数据改变的消息传递被屏蔽了，我们无需手动去处理状态改变事件的发布和订阅了，这一切都被封装在Provider中了；不用像eventbus一样自己去定义事件和注册、解注册等
在大型复杂应用中，尤其是需要全局共享的状态非常多时，使用Provider将会大大简化我们的代码逻辑，降低出错的概率，提高开发效率。
缺点：
- 没有有效解决逻辑和视图解耦的问题
- 对于状态的集中和分治管理没有提供有效的方式
Redux
版本：flutter_redux 0.6.0、redux 4.0.0
Redux 是一个用来做可预测、易调试的数据管理的框架。 所有对数据的增删改查等操作都由 Redux 来集中负责。
在了解Redux前，先介绍下Stream
Stream
创建方式
-
通过构造函数
Stream.fromFuture:从Future创建新的单订阅流,当future完成时将触发一个data或者error，然后使用Down事件关闭这个流。
Stream.fromFutures:从一组Future创建一个单订阅流，每个future都有自己的data或者error事件，当整个Futures完成后，流将会关闭。如果Futures为空，流将会立刻关闭。
Stream.fromIterable:创建从一个集合中获取其数据的单订阅流
Stream.fromIntreable([1,2,3]);监听一个流最常见的方法就是listen。当有事件发出时，流将会通知listener。Listen方法提供了这几种触发事件：
- onData(必填)：收到数据时触发
- onError：收到Error时触发
- onDone：结束时触发
- unsubscribeOnError：遇到第一个Error时是否取消订阅，默认为false
-
使用StreamController
//任意类型的流 StreamController controller = StreamController(); controller.sink.add(123); controller.sink.add("xyz"); controller.sink.add(Anything); //创建一条处理int类型的流 StreamController<int> numController = StreamController(); numController.sink.add(123);
种类
-
"Single-subscription" streams 单订阅流
StreamController controller = StreamController(); controller.stream.listen((data)=> print(data)); controller.stream.listen((data)=> print(data)); controller.sink.add(123);输出： Bad state: Stream has already been listened to. 单订阅流不能有多个收听者
只能有一个监听，并且取消后也不能加入新的；流的发送是在增加监听之后才触发的，所以不会错过事件，如io流
-
"broadcast" streams 多订阅流
可以增加多个监听，监听器只能监听到添加之后发出的事件，正在和之前发出的均不会收到
从Stream继承的广播流必须重写isBroadcast 才能返回true
StreamController controller = StreamController(); //将单订阅流转化为广播流 Stream stream = controller.stream.asBroadcastStream(); stream.listen((data)=> print(data)); stream.listen((data)=> print(data)); controller.sink.add(123); /// 输出： 123 123
转换方法
-
流提供了众多操作符map()，where()，expand()，和take()方法，能够轻松将已有的流转化为新的流
stream.where((event){...}) StreamController<int> controller = StreamController<int>(); final transformer = StreamTransformer<int,String>.fromHandlers( handleData:(value, sink){ if(value==100){ sink.add("你猜对了"); } else{ sink.addError('还没猜中，再试一次吧'); } }); controller.stream .transform(transformer) .listen( (data) => print(data), onError:(err) => print(err)); controller.sink.add(23);
三项原则
-
可信任的单一数据源
整个应用的状态应该都被存储在一颗状态对象树中(store)
-
状态只读
每个状态对象都是普通dart对象，并且是Imutation；状态对外只读，要改变state只能通过发出action经由相应的reducer里修改
-
状态只由纯函数更改
这里的纯函数指的是reducer，接收前一个状态值和action，这里根据上述2个变量生成新的状态值
概念
| 对象 | 说明 | 所属库 |
|---|---|---|
| Store | 状态的载体(仓库)，持有Reducer、State、Middleware | redux包 |
| Reducer | 对State进行改变操作的地方，其他地方不能改变，因为State<br />都是Imutaion的 | redux包 |
| Action | 行为的抽象，标识一种对State改变的行为 | redux包 |
| State | 影响View树的状态值 | redux包 |
| StoreProvider | 继承自InheritedWidget，主要用于Store的DI注入 | Flutter_redux包 |
| StoreConnector | 关联Store，利用Stream和StreamBuilder实现局部刷新，可利用Stream丰富的API进行功能的添加 | Flutter_redux包 |
| Middleware | 中间件，用于在reducer执行前拦截进行一些操作，<br />调用next则执行下一个中间件直到Reducer | redux包 |
使用例子
官方Demo: Counter
enum Actions { Increment } /// 1. 定义Action
int counterReducer(int state, dynamic action) {
if (action == Actions.Increment) { /// 2. 创建Reducer
return state + 1;
}
return state;
}
void main() {
final store = Store<int>(counterReducer, initialState: 0); /// 3. 初始化store
runApp(FlutterReduxApp(
title: 'Flutter Redux Demo',
store: store,
));
}
class FlutterReduxApp extends StatelessWidget {
final Store<int> store;
final String title;
FlutterReduxApp({Key key, this.store, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return StoreProvider<int>( /// 4. 在根Widget注入store
store: store,
child: MaterialApp(
title: title,
home: Scaffold(
appBar: AppBar(
title: Text(title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'You have pushed the button this many times:',
),
StoreConnector<int, String>( /// 5. 连接Store和子树
converter: (store) => store.state.toString(), /// 6. 从store中 取出转换成需要的state
builder: (context, count) { /// 7. 构建子widget树
return Text(
count,
style: Theme.of(context).textTheme.display1,
);
},
)
],
),
),
floatingActionButton: StoreConnector<int, VoidCallback>(
converter: (store) {
return () => store.dispatch(Actions.Increment); /// 8. 获取dispatch
},
builder: (context, callback) {
return FloatingActionButton(
onPressed: callback, /// 9. 发送"加数"的Action
tooltip: 'asdasdasd',
child: Icon(Icons.add),
);
},
),
),
),
);
}
}
图示
redux图示1.png
关键对象
Store
主要实现
- 中间件及状态改变(reducer)功能
- 利用streamBroadcast 实现订阅功能
class Store<State> {
Reducer<State> reducer;
final StreamController<State> _changeController;
State _state;
List<NextDispatcher> _dispatchers;
Store(
this.reducer, {
State initialState,
List<Middleware<State>> middleware = const [],
bool syncStream = false,
bool distinct = false,
}) : _changeController = StreamController.broadcast(sync: syncStream) {
_state = initialState;
_dispatchers = _createDispatchers( /// 创建链式中间件和Reducer的链式结构
middleware,
_createReduceAndNotify(distinct), /// 用NextDispatcher包装reducer
);
}
...
}
/// NextDispatcher定义如下：
typedef dynamic NextDispatcher(dynamic action);
-
创建链式结构
将Reducer包装成NextDispatcher，实际利用了闭包来访问reducer
NextDispatcher _createReduceAndNotify(bool distinct) { return (dynamic action) { final state = reducer(_state, action); if (distinct && state == _state) return; _state = state; _changeController.add(state); /// 往stream添加事件，会触发流的监听 }; }闭包将reducer和middleware处理后生成一个链式的NextDispatcher结构
List<NextDispatcher> _createDispatchers( List<Middleware<State>> middleware, NextDispatcher reduceAndNotify, ) { final dispatchers = <NextDispatcher>[]..add(reduceAndNotify); // Convert each [Middleware] into a [NextDispatcher] for (var nextMiddleware in middleware.reversed) { final next = dispatchers.last; /// 每次取NextDispatcher集合末尾的元素 dispatchers.add( (dynamic action) => nextMiddleware(this, action, next), /// 往集合尾部追加中间件的封装函数(NextDispatcher) ); } return dispatchers.reversed.toList(); /// 最后将集合逆序，即先按顺序执行中间件，最后执行Reducer } -
Store里有一个dispatch方法，用于发出改变状态的行为
dynamic dispatch(dynamic action) { return _dispatchers[0](action); }如上，dispatch时，实际上就是从链头开始走NextDispatcher方法，中间经过middleware和reducer的处理
Reducer
接收当前状态值和Action，处理后返回一个新的State用于替换当前State
typedef State Reducer<State>(State state, dynamic action);
StoreProvider
主要实现：
- Store的DI注入
class StoreProvider<S> extends InheritedWidget {
final Store<S> _store;
...
static Store<S> of<S>(BuildContext context, {bool listen = true}) {
final type = _typeOf<StoreProvider<S>>();
final provider = (listen
? context.inheritFromWidgetOfExactType(type) /// 从树结构获取Widget并且将context加入监听集合
: context
.ancestorInheritedElementForWidgetOfExactType(type) /// 只获取 不加入监听
?.widget) as StoreProvider<S>;
if (provider == null) throw StoreProviderError(type);
return provider._store;
}
...
}
StoreConnector
主要实现：
- 从父层级获取Store
- 利用Stream和StreamBuilder实现局部刷新，可利用Stream丰富的API进行功能的添加
class StoreConnector<S, ViewModel> extends StatelessWidget {
...
@override
Widget build(BuildContext context) {
return _StoreStreamListener<S, ViewModel>(
store: StoreProvider.of<S>(context), /// 沿树往上搜索Store
builder: builder, /// 利用ViewModel构建Widget
converter: converter, /// 将获取的State转为ViewModel
distinct: distinct, /// 性能优化开关，决定当ViewModel改变时是否利用==去比较以决定是否rebuild
onInit: onInit,
onDispose: onDispose,
rebuildOnChange: rebuildOnChange,
ignoreChange: ignoreChange,
onWillChange: onWillChange,
onDidChange: onDidChange,
onInitialBuild: onInitialBuild,
);
}
...
}
class _StoreStreamListener<S, ViewModel> extends StatefulWidget {
...
@override
State<StatefulWidget> createState() {
return _StoreStreamListenerState<S, ViewModel>();
}
...
}
class _StoreStreamListenerState<S, ViewModel>
extends State<_StoreStreamListener<S, ViewModel>> {
...
@override
void initState() {
...
latestValue = widget.converter(widget.store); /// 将state转换成ViewModel
_createStream(); /// 创建监听流
...
}
void _createStream() {
stream = widget.store.onChange /// 取出Store的流
.where(_ignoreChange)
.map(_mapConverter) /// 这里执行传进来的convert方法进行转换
.where(_whereDistinct) /// 性能优化，与distinct相关,
.transform(StreamTransformer.fromHandlers(handleData: _handleChange)); ///生成ViewModel的流
}
/// 这里实际就是将State转为ViewModel流的地方
void _handleChange(ViewModel vm, EventSink<ViewModel> sink) {
if (widget.onWillChange != null) {
widget.onWillChange(latestValue, vm);
}
latestValue = vm;
if (widget.onDidChange != null) {
WidgetsBinding.instance.addPostFrameCallback((_) {
widget.onDidChange(latestValue);
});
}
sink.add(vm);
}
@override
void didUpdateWidget(_StoreStreamListener<S, ViewModel> oldWidget) {
/// InheritedWidget 的依赖情况改变时会调用，判断是否需要重新关联新的流
latestValue = widget.converter(widget.store);
if (widget.store != oldWidget.store) {
_createStream();
}
super.didUpdateWidget(oldWidget);
}
@override
Widget build(BuildContext context) {
/// 使用官方StreamBuilder组件来监听转换后ViewModel流
return widget.rebuildOnChange
? StreamBuilder<ViewModel>(
stream: stream,
builder: (context, snapshot) => widget.builder(
context,
latestValue,
),
)
: widget.builder(context, latestValue);
}
}
注意：
- 上述Build方法里的rebuildOnChange：true 则会启用流监听，否则只是普通的widget构建，更新只在InheritedWidget依赖改变或者上层build时才触发rebuild
- 因为整个State是一个stream出来的，每次store的state改变均会发出事件，widget.distinct，这个开启后，便可实现某个单独的Connector只有在依赖的ViewModel改变时才会重新build
实际上利用InherityWidget实现Store的DI注入，
工具方法
在redux包里有一个工具方法集合 位于：src/utils.dart
- combineReducers，用来合并Reducer
/// 利用闭包 包装多个Reducer为一个Reducer
Reducer<State> combineReducers<State>(Iterable<Reducer<State>> reducers) {
return (State state, dynamic action) {
for (final reducer in reducers) {
state = reducer(state, action);
}
return state;
};
}
-
TypedMiddleware<State, Action> ，用来根据action过滤执行指定的中间件
final todosReducer = combineReducers<List<Todo>>([ TypedReducer<List<Todo>, AddTodoAction>(_addTodo), TypedReducer<List<Todo>, DeleteTodoAction>(_deleteTodo), ... ]); -
TypedReducer<State, Action> ，用来根据action过滤执行指定的reducer
[ TypedMiddleware<AppState, LoadTodosAction>(loadTodos), TypedMiddleware<AppState, AddTodoAction>(saveTodos), ... ];
总结
优点
- 一颗状态树对应用状态进去集权统一管理，方便对状态改变log、序列化、持久化、测试、撤销重做、时光轴回放
- 状态均为immutation，每次的改变均生成一个新的，防止副作用产生
- 状态的改变不管从view还是网络 均必须通过发出action，在reducer里修改，保证了无竞争问题
- 追踪问题方便，可打印某一时刻的状态树，直观分析出异常状态节点
- 支持面向切面AOP编程的中间件，中间件定义是可插拔，可叠加，但不会改变事件流程
缺点
- Redux 的集中和 Component 的分治之间的矛盾
- Redux 的 Reducer 需要一层层手动组装，带来的繁琐性和易错性
- 代码结构侵入性较大
- 如果父组件发生更新，子组件绑定的数据源并未发生变化，仍会导致子的rebuild(可利用缓存child解决)
辅助库
-
通过定义中间件拦截 指定的 Function，以实现异步操作然后dispatch改变state的action去刷新
flutter_redux_dev_tools : Time Travel UI，可和React.js一样实现时间旅行
