高防服务器
  • 电 话：400-808-5836
  • MSN ：huad@live.com
  • 客服QQ：4698328 9291215
  • 咨询邮箱：sales@fobhost.com
  • 售后：services@fobhost.com
  • https://www.gaofangfuwuqi.com/
    • 首页 新闻资讯 Fish Redux中的Dispatch如何实现

    Fish Redux中的Dispatch如何实现


    Fish Redux中的Dispatch如何实现

    发布时间：2021-12-02 17:53:26 来源：高防服务器网 阅读：90 作者：小新 栏目：开发技术

    这篇文章主要为大家展示了“Fish Redux中的Dispatch如何实现”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Fish Redux中的Dispatch如何实现”这篇文章吧。

    前言

    我们在使用fish-redux构建应用的时候，界面代码（view）和事件的处理逻辑（reducer，effect）是完全解耦的，界面需要处理事件的时候将action分发给对应的事件处理逻辑去进行处理，而这个分发的过程就是下面要讲的dispatch， 通过本篇的内容，你可以更深刻的理解一个action是如何一步步去进行分发的。

    从example开始

    为了更好的理解action的dispatch过程，我们就先以todolistpage中一条todo条目的勾选事件为例，来看点击后事件的传递过程，通过断点debug我们很容易就能够发现点击时候发生的一切，具体过程如下：

    1. 用户点击勾选框，GestureDetector的onTap会被回调

    2. 通过buildView传入的dispatch函数对doneAction进行分发，发现todo_component的effect中无法处理此doneAction，所以将其交给pageStore的dispatch继续进行分发

    3. pageStore的dispatch会将action交给reducer进行处理，故doneAction对应的_markDone会被执行，对state进行clone，并修改clone后的state的状态，然后将这个全新的state返回

    4. 然后pageStore的dispatch会通知所有的listeners，其中负责界面重绘的_viewUpdater发现state发生变化，通知界面进行重绘更新

    Dispatch实现分析

    Dispatch在fish-redux中的定义如下

    typedef Dispatch = void Function(Action action);

    本质上就是一个action的处理函数，接受一个action，然后对action进行分发。

    下面我门通过源码来进行详细的分析。

    0component->ComponentWidget->ComponentState->_mainCtx->_dispatch而 _mainCtx的初始化则是通过componet的createContext方法来创建的，顺着方法下去我们看到了dispatch的初始化

    1. // redux_component/context.dart DefaultContext初始化方法

    3.   DefaultContext({
    4.     @required this.factors,
    5.     @required this.store,
    6.     @required BuildContext buildContext,
    7.     @required this.getState,
    8.   })  : assert(factors != null),
    9.         assert(store != null),
    10.         assert(buildContext != null),
    11.         assert(getState != null),
    12.         _buildContext = buildContext {
    13.     final OnAction onAction = factors.createHandlerOnAction(this);

    15.     /// create Dispatch
    16.     _dispatch = factors.createDispatch(onAction, this, store.dispatch);

    18.     /// Register inter-component broadcast
    19.     _onBroadcast =
    20.         factors.createHandlerOnBroadcast(onAction, this, store.dispatch);
    21.     registerOnDisposed(store.registerReceiver(_onBroadcast));
    22.   }

    context中的dispatch是通过factors来进行创建的，factors其实就是当前component，factors创建dispatch的时候传入了onAction函数,以及context自己和store的dispatch。onAction主要是进行Effect处理。这边还可以看到，进行context初始化的最后，还将自己的onAction包装注册到store的广播中去，这样就可以接收到别人发出的action广播。

    Component继承自Logic

    1. // redux_component/logic.dart

    3.   @override
    4.   Dispatch createDispatch(
    5.       OnAction onAction, Context<T> ctx, Dispatch parentDispatch) {
    6.     Dispatch dispatch = (Action action) {
    7.       throw Exception(
    8.           'Dispatching while appending your effect & onError to dispatch is not allowed.');
    9.     };

    11.     /// attach to store.dispatch
    12.     dispatch = _applyOnAction<T>(onAction, ctx)(
    13.       dispatch: (Action action) => dispatch(action),
    14.       getState: () => ctx.state,
    15.     )(parentDispatch);
    16.     return dispatch;
    17.   }

    19.     static Middleware<T> _applyOnAction<T>(OnAction onAction, Context<T> ctx) {
    20.     return ({Dispatch dispatch, Get<T> getState}) {
    21.       return (Dispatch next) {
    22.         return (Action action) {
    23.           final Object result = onAction?.call(action);
    24.           if (result != null && result != false) {
    25.             return;
    26.           }

    28.           //skip-lifecycle-actions
    29.           if (action.type is Lifecycle) {
    30.             return;
    31.           }


    34.           if (!shouldBeInterruptedBeforeReducer(action)) {
    35.             ctx.pageBroadcast(action);
    36.           }

    38.           next(action);
    39.         };
    40.       };
    41.     };
    42.   }
    43. }

    上面分发的逻辑大概可以通过上图来表示

    1. 通过onAction将action交给component对应的effect进行处理

    2. 当effect无法处理此action，且此action非lifecycle-actions，且不需中断则广播给当前Page的其余所有effects

    3. 最后就是继续将action分发给store的dispatch(parentDispatch传入的其实就是store.dispatch)

    0

    • // redux/create_store.dart


    •  final Dispatch dispatch = (Action action) {

    •    _throwIfNot(action != null, 'Expected the action to be non-null value.');

    •    _throwIfNot(

    •        action.type != null, 'Expected the action.type to be non-null value.');

    •    _throwIfNot(!isDispatching, 'Reducers may not dispatch actions.');


    •    try {

    •      isDispatching = true;

    •      state = reducer(state, action);

    •    } finally {

    •      isDispatching = false;

    •    }


    •    final List<_VoidCallback> _notifyListeners = listeners.toList(

    •      growable: false,

    •    );

    •    for (_VoidCallback listener in _notifyListeners) {

    •      listener();

    •    }


    •    notifyController.add(state);

    •  };

      • store的dispatch过程比较简单，主要就是进行reducer的调用，处理完成后通知监听者。

      0

    • // redux_component/component.dart


    •  Widget buildPage(P param) {

    •    return wrapper(_PageWidget<T>(

    •      component: this,

    •      storeBuilder: () => createPageStore<T>(

    •            initState(param),

    •            reducer,

    •            applyMiddleware<T>(buildMiddleware(middleware)),

    •          ),

    •    ));

    •  }


    • // redux_component/page_store.dart


    • PageStore<T> createPageStore<T>(T preloadedState, Reducer<T> reducer,

    •        [StoreEnhancer<T> enhancer]) =>

    •    _PageStore<T>(createStore(preloadedState, reducer, enhancer));


    • // redux/create_store.dart


    • Store<T> createStore<T>(T preloadedState, Reducer<T> reducer,

    •        [StoreEnhancer<T> enhancer]) =>

    •    enhancer != null

    •        ? enhancer(_createStore)(preloadedState, reducer)

    •        : _createStore(preloadedState, reducer);

      • 所以这里可以看到，当传入enhancer时，createStore的工作被enhancer代理了，会返回一个经过enhancer处理过的store。而PageStore创建的时候传入的是中间件的enhancer。

      1. // redux/apply_middleware.dart

      3. StoreEnhancer<T> applyMiddleware<T>(List<Middleware<T>> middleware) {
      4.   return middleware == null || middleware.isEmpty
      5.       ? null
      6.       : (StoreCreator<T> creator) => (T initState, Reducer<T> reducer) {
      7.             assert(middleware != null && middleware.isNotEmpty);

      9.             final Store<T> store = creator(initState, reducer);
      10.             final Dispatch initialValue = store.dispatch;
      11.             store.dispatch = (Action action) {
      12.               throw Exception(
      13.                   'Dispatching while constructing your middleware is not allowed. '
      14.                   'Other middleware would not be applied to this dispatch.');
      15.             };
      16.             store.dispatch = middleware
      17.                 .map((Middleware<T> middleware) => middleware(
      18.                       dispatch: (Action action) => store.dispatch(action),
      19.                       getState: store.getState,
      20.                     ))
      21.                 .fold(
      22.                   initialValue,
      23.                   (Dispatch previousValue,
      24.                           Dispatch Function(Dispatch) element) =>
      25.                       element(previousValue),
      26.                 );

      28.             return store;
      29.           };
      30. }

      这里的逻辑其实就是将所有的middleware的处理函数都串到store的dispatch，这样当store进行dispatch的时候所有的中间件的处理函数也会被调用。下面为各个处理函数的执行顺序，

      首先还是component中的dispatch D1 会被执行，然后传递给store的dispatch，而此时store的dispatch已经经过中间件的增强，所以会执行中间件的处理函数，最终store的原始dispatch函数D2会被执行。

    以上是“Fish Redux中的Dispatch如何实现”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注高防服务器网行业资讯频道！

    [微信提示：高防服务器能助您降低 IT 成本，提升运维效率，使您更专注于核心业务创新。

    [图文来源于网络，不代表本站立场，如有侵权，请联系高防服务器网删除]
    [