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。
网友评论