美文网首页
flutter redux的理解

flutter redux的理解

作者: only_run | 来源:发表于2020-10-12 17:34 被阅读0次

    redux是 flutter项目中的 状态管理解决方案
    redux

    关键角色

    • Action
      redux中的执行动作,可理解为一个标记。
    • State
      这里是Redux中的状态数据。
    • Store,reducer middleware
      Store一个关键对象,持有reducer,状态数据 和middleware中间件。
      reducer用来根据对应的action 修改操作指定的状态数据;本身是一个函数

    typedef State Reducer<State>(State state, dynamic action);

    middleware 中间件,用来在 reducer 操作状态数据之前,拦截action;

    typedef void Middleware<State>(Store<State> store,dynamic action,NextDispatcher next,
    );

    • StoreProvider
      作为 顶层widget的 build函数的返回widget,并持有Store对象;
    • StoreBuilder StoreConnector
      接收 状态数据变化的widget;只能 作为 StoreProvider的下层widget使用;

    Store详解

     Store(
        this.reducer, {
        State initialState,
        List<Middleware<State>> middleware = const [],
        bool syncStream: false,
    
        /// If set to true, the Store will not emit onChange events if the new State
        /// that is returned from your [reducer] in response to an Action is equal
        /// to the previous state.
        ///
        /// Under the hood, it will use the `==` method from your State class to
        /// determine whether or not the two States are equal.
        bool distinct: false,
      })
          : _changeController = new StreamController.broadcast(sync: syncStream) {
        _state = initialState;
        _dispatchers = _createDispatchers(
          middleware,
          _createReduceAndNotify(distinct),
        );
      }
    

    Store创建对象时,可指定Reducer,状态数据,和多个中间件;
    并在构造方法中 创建一个StreamController _changeController ,mark一下 后面会有关联使用;
    对middleware中间件 进行了包装 成为NextDispatcher;

    typedef void NextDispatcher(dynamic action);
    

    StoreProvider详解

     const StoreProvider({
        Key key,
        @required Store<S> store,
        @required Widget child,
      }) 
    
     static Store<S> of<S>(BuildContext context, {bool listen = true}) {
      ...
     }
    

    StoreProvider 创建是需要指定一个 store对象;
    StoreProvider 有一个 静态函数 StoreProvider.of() 获取 祖先或者当前widget的 store;
    StoreProvider 是 InheritedWidget的子类;

    StoreBuilder,StoreConnector详解

    StoreBuilder是 对StoreConnector的封装;
    StoreConnector 本质是一个 widget,只不过 build函数 使用了 StreamBuilder;
    Store对象 通过StoreProvider.of<S>(context)获取,没错就是StoreProvider类的静态函数;
    而stream 对象就是 Store对象持有的 数据流观察者,来接收store数据变化 并通过StreamBuilder 重新build;

    @override
      Widget build(BuildContext context) {
        return widget.rebuildOnChange
            ? StreamBuilder<ViewModel>(
                stream: stream,
                builder: (context, snapshot) => widget.builder(
                  context,
                  latestValue,
                ),
              )
            : widget.builder(context, latestValue);
      }
    

    action的发出和处理

    Store 有一个发送action的函数 dispatch;

    void dispatch(dynamic action) {
        _dispatchers[0](action);
      }
    

    action 的处理是由 NextDispatcher包装的 Middleware完成的;而且最后一个 NextDispatcher包装的 Middleware中间件 是固定的(redux框架 指定的),用来 更新 数据状态 和通知widget更新。
    固定的中间件:

     NextDispatcher _createReduceAndNotify(bool distinct) {
        return (dynamic action) {
          final state = reducer(_state, action);
    
          if (distinct && state == _state) return;
    
          _state = state;
          _changeController.add(state);
        };
      }
    

    业务widget接收更新

    业务widget 即:StoreBuilder StoreConnector;在build函数中 通过 StreamBuilder 的stream接收 数据状态的变化,并重新build。

    相关文章

      网友评论

          本文标题:flutter redux的理解

          本文链接:https://www.haomeiwen.com/subject/lkuupktx.html