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),
    );
  }

总结

优点：

1. 自动订阅
2. 可跨组件传递状态
3. 简单易用，对前端开发者来说学习成本几乎为零

缺点：

1. 无法分离视图逻辑和业务逻辑
2. 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），文章将主要的内容都剥离出来带着实现了一遍

总结

优点：

1. 利用child缓存机制优化了InheritedWidget的全量build缺点

2. 我们的业务代码更关注数据了，只要更新Model，则UI会自动更新，而不用在状态改变后再去手动调用setState()来显式更新页面。

3. 数据改变的消息传递被屏蔽了，我们无需手动去处理状态改变事件的发布和订阅了，这一切都被封装在Provider中了；不用像eventbus一样自己去定义事件和注册、解注册等

4. 在大型复杂应用中，尤其是需要全局共享的状态非常多时，使用Provider将会大大简化我们的代码逻辑，降低出错的概率，提高开发效率。

缺点：

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

Redux

版本：flutter_redux 0.6.0、redux 4.0.0

库：flutter_redux

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

在了解Redux前，先介绍下Stream

Stream

创建方式

1. 通过构造函数

   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

2. 使用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);
   

种类

1. "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流

2. "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
   

转换方法

1. 流提供了众多操作符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);
   

三项原则

1. 可信任的单一数据源

   整个应用的状态应该都被存储在一颗状态对象树中(store)

2. 状态只读

   每个状态对象都是普通dart对象，并且是Imutation；状态对外只读，要改变state只能通过发出action经由相应的reducer里修改

3. 状态只由纯函数更改

   这里的纯函数指的是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

主要实现

1. 中间件及状态改变(reducer)功能
2. 利用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);

1. 创建链式结构

   将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
     }
   

2. 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

主要实现：

1. 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

主要实现：

1. 从父层级获取Store
2. 利用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);
  }
}

注意：

1. 上述Build方法里的rebuildOnChange：true 则会启用流监听，否则只是普通的widget构建，更新只在InheritedWidget依赖改变或者上层build时才触发rebuild
2. 因为整个State是一个stream出来的，每次store的state改变均会发出事件，widget.distinct，这个开启后，便可实现某个单独的Connector只有在依赖的ViewModel改变时才会重新build

实际上利用InherityWidget实现Store的DI注入，

工具方法

在redux包里有一个工具方法集合 位于：src/utils.dart

1. 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;
  };
}

2. TypedMiddleware<State, Action> ，用来根据action过滤执行指定的中间件

   final todosReducer = combineReducers<List<Todo>>([
     TypedReducer<List<Todo>, AddTodoAction>(_addTodo),
     TypedReducer<List<Todo>, DeleteTodoAction>(_deleteTodo),
     ...
   ]);
   

3. TypedReducer<State, Action> ，用来根据action过滤执行指定的reducer

   [
       TypedMiddleware<AppState, LoadTodosAction>(loadTodos),
       TypedMiddleware<AppState, AddTodoAction>(saveTodos),
       ...
     ];
   

总结

优点

1. 一颗状态树对应用状态进去集权统一管理，方便对状态改变log、序列化、持久化、测试、撤销重做、时光轴回放
2. 状态均为immutation，每次的改变均生成一个新的，防止副作用产生
3. 状态的改变不管从view还是网络 均必须通过发出action，在reducer里修改，保证了无竞争问题
4. 追踪问题方便，可打印某一时刻的状态树，直观分析出异常状态节点
5. 支持面向切面AOP编程的中间件，中间件定义是可插拔，可叠加，但不会改变事件流程

缺点

1. Redux 的集中和 Component 的分治之间的矛盾
2. Redux 的 Reducer 需要一层层手动组装，带来的繁琐性和易错性
3. 代码结构侵入性较大
4. 如果父组件发生更新，子组件绑定的数据源并未发生变化，仍会导致子的rebuild(可利用缓存child解决)

辅助库

1. redux_thunk

   通过定义中间件拦截 指定的 Function，以实现异步操作然后dispatch改变state的action去刷新

2. flutter_redux_dev_tools : Time Travel UI，可和React.js一样实现时间旅行

参考

1. Todo app