Flutter状态管理之路（二）

接上一篇 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的源码实现，这里推荐阅读跨组件状态共享（Provider），文章将主要的内容都剥离出来带着实现了一遍

总结

优点：

利用child缓存机制优化了InheritedWidget的全量build缺点
我们的业务代码更关注数据了，只要更新Model，则UI会自动更新，而不用在状态改变后再去手动调用setState()来显式更新页面。
数据改变的消息传递被屏蔽了，我们无需手动去处理状态改变事件的发布和订阅了，这一切都被封装在Provider中了；不用像eventbus一样自己去定义事件和注册、解注册等
在大型复杂应用中，尤其是需要全局共享的状态非常多时，使用Provider将会大大简化我们的代码逻辑，降低出错的概率，提高开发效率。

缺点：

没有有效解决逻辑和视图解耦的问题
对于状态的集中和分治管理没有提供有效的方式

Redux

版本：flutter_redux 0.6.0、redux 4.0.0

库：flutter_redux

Redux 是一个用来做可预测、易调试的数据管理的框架。所有对数据的增删改查等操作都由 Redux 来集中负责。

在了解Redux前，先介绍下Stream

Stream

创建方式

通过构造函数

Stream.fromFuture:从Future创建新的单订阅流,当future完成时将触发一个data或者error，然后使用Down事件关闭这个流。

Stream.fromFutures:从一组Future创建一个单订阅流，每个future都有自己的data或者error事件，当整个Futures完成后，流将会关闭。如果Futures为空，流将会立刻关闭。

Stream.fromIterable:创建从一个集合中获取其数据的单订阅流
1
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 单订阅流
1
2
3
4
5
6
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 都是Imutaion的	redux包
Action	行为的抽象，标识一种对State改变的行为	redux包
State	影响View树的状态值	redux包
StoreProvider	继承自InheritedWidget，主要用于Store的DI注入	Flutter_redux包
StoreConnector	关联Store，利用Stream和StreamBuilder实现局部刷新，可利用Stream丰富的API进行功能的添加	Flutter_redux包
Middleware	中间件，用于在reducer执行前拦截进行一些操作，调用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),
              );
            },
          ),
        ),
      ),
    );
  }
}

图示

关键对象

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方法，用于发出改变状态的行为
1
2
3
dynamic dispatch(dynamic action) {
return _dispatchers[0](action);
}
如上，dispatch时，实际上就是从链头开始走NextDispatcher方法，中间经过middleware和reducer的处理

Reducer

接收当前状态值和Action，处理后返回一个新的State用于替换当前State

1	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解决)

辅助库

redux_thunk

通过定义中间件拦截指定的 Function，以实现异步操作然后dispatch改变state的action去刷新
flutter_redux_dev_tools : Time Travel UI，可和React.js一样实现时间旅行

参考

Todo app

Flutter状态管理之路（二）

ScopedModel

使用

关键对象

Model

ScopedModelDescendant

ScopedModel

总结

Provider

使用

流程图

核心实现

总结

Redux

Stream

创建方式

种类

转换方法

三项原则

概念

使用例子

图示

关键对象

Store

Reducer

StoreProvider

StoreConnector

工具方法

总结

优点

缺点

辅助库

参考

谢谢~