Flutter 开发实战

235课时
1K学过
8分

课程评价 (0)

请对课程作出评价:
0/300

学员评价

暂无精选评价
1分钟

08 fish_redux-2

现在看起来使用流程是不是变得复杂了?

但是这带来的好处就是 复用的颗粒度更细了,装配和功能更加的清晰。 那这个过程是如何实现的呢?后面我们将分析这个复杂的流程。

class FishPage extends Page<CountState, Map<String, dynamic>> {
  FishPage()
      : super(
          initState: initState,
          effect: buildEffect(),
          reducer: buildReducer(),
          ///配置 View 显示
          view: buildView,
          ///配置 Dependencies 显示
          dependencies: Dependencies<CountState>(
              slots: <String, Dependent<CountState>>{
                ///通过 Connector() 从 大 state 转化处小 state
                ///然后将数据渲染到 Component
                'count-double': DoubleCountConnector() + DoubleCountComponent()
              }
          ),
          middleware: <Middleware<CountState>>[
            ///中间键打印log
            logMiddleware(tag: 'FishPage'),
          ]
  );
}

///渲染主页
Widget buildView(CountState state, Dispatch dispatch, ViewService viewService) {
  return Scaffold(
      appBar: AppBar(
        title: new Text("fish"),
      ),
      body: new Column(
        children: <Widget>[
          ///viewService 渲染 dependencies
          viewService.buildComponent('count-double'),
          new Expanded(child: new Center(child: new Text(state.count.toString()))),
          new Center(
            child: new FlatButton(
                onPressed: () {
                  ///+
                  dispatch(CountActionCreator.onAddAction());
                },
                color: Colors.blue,
                child: new Text("+")),
          ),
          new SizedBox(
            height: 100,
          )
        ],
      ));
}

如下大图所示,整个联动的流程比 flutter_redux 复杂了更多( 如果看不清可以点击大图 ),而这个过程我们总结起来就是:

  • 1、Page 的构建需要 StateEffectReducerviewdependenciesmiddleware 等参数。
  • 2、Page 的内部 PageProvider 是一个 InheritedWidget 用户状态共享。
  • 3、Page 内部会通过 createMixedStore 创建 Store 对象。
  • 4、Store 对象对外提供的 subscribe 方法,在订阅时会将订阅的方法添加到内部 List<_VoidCallback> _listeners
  • 5、Store 对象内部的 StreamController.broadcast 创建出了 _notifyController 对象用于广播更新。
  • 6、Store 对象内部的 subscribe 方法,会在 ComponentState 中添加订阅方法 onNotify如果调用在 onNotify 中最终会执行 setState更新UI。
  • 7、Store 对象对外提供的 dispatch 方法,执行时内部会执行 4 中的 List<_VoidCallback> _listeners,触发 onNotify
  • 8、Page 内部会通过 Logic 创建 Dispatch ,执行时经历 Effect -> Middleware -> Stroe.dispatch -> Reducer -> State -> _notifyController -> _notifyController.add(state) 等流程。
  • 9、以上流程最终就是 Dispatch 触发 Store 内部 _notifyController , 最终会触发 ComponentState 中的 onNotify 中的setState更新UI