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
的构建需要State
、Effect
、Reducer
、view
、dependencies
、middleware
等参数。 - 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
学员评价