高防服务器

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初始化方法


  2.  DefaultContext({

  3.    @required this.factors,

  4.    @required this.store,

  5.    @required BuildContext buildContext,

  6.    @required this.getState,

  7.  })  : assert(factors != null),

  8.        assert(store != null),

  9.        assert(buildContext != null),

  10.        assert(getState != null),

  11.        _buildContext = buildContext {

  12.    final OnAction onAction = factors.createHandlerOnAction(this);


  13.    /// create Dispatch

  14.    _dispatch = factors.createDispatch(onAction, this, store.dispatch);


  15.    /// Register inter-component broadcast

  16.    _onBroadcast =

  17.        factors.createHandlerOnBroadcast(onAction, this, store.dispatch);

  18.    registerOnDisposed(store.registerReceiver(_onBroadcast));

  19.  }

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

Component继承自Logic

  1. // redux_component/logic.dart


  2.  @override

  3.  Dispatch createDispatch(

  4.      OnAction onAction, Context<T> ctx, Dispatch parentDispatch) {

  5.    Dispatch dispatch = (Action action) {

  6.      throw Exception(

  7.          'Dispatching while appending your effect & onError to dispatch is not allowed.');

  8.    };


  9.    /// attach to store.dispatch

  10.    dispatch = _applyOnAction<T>(onAction, ctx)(

  11.      dispatch: (Action action) => dispatch(action),

  12.      getState: () => ctx.state,

  13.    )(parentDispatch);

  14.    return dispatch;

  15.  }


  16.    static Middleware<T> _applyOnAction<T>(OnAction onAction, Context<T> ctx) {

  17.    return ({Dispatch dispatch, Get<T> getState}) {

  18.      return (Dispatch next) {

  19.        return (Action action) {

  20.          final Object result = onAction?.call(action);

  21.          if (result != null && result != false) {

  22.            return;

  23.          }


  24.          //skip-lifecycle-actions

  25.          if (action.type is Lifecycle) {

  26.            return;

  27.          }



  28.          if (!shouldBeInterruptedBeforeReducer(action)) {

  29.            ctx.pageBroadcast(action);

  30.          }


  31.          next(action);

  32.        };

  33.      };

  34.    };

  35.  }

  36. }

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

  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


    2. StoreEnhancer<T> applyMiddleware<T>(List<Middleware<T>> middleware) {

    3.  return middleware == null || middleware.isEmpty

    4.      ? null

    5.      : (StoreCreator<T> creator) => (T initState, Reducer<T> reducer) {

    6.            assert(middleware != null && middleware.isNotEmpty);


    7.            final Store<T> store = creator(initState, reducer);

    8.            final Dispatch initialValue = store.dispatch;

    9.            store.dispatch = (Action action) {

    10.              throw Exception(

    11.                  'Dispatching while constructing your middleware is not allowed. '

    12.                  'Other middleware would not be applied to this dispatch.');

    13.            };

    14.            store.dispatch = middleware

    15.                .map((Middleware<T> middleware) => middleware(

    16.                      dispatch: (Action action) => store.dispatch(action),

    17.                      getState: store.getState,

    18.                    ))

    19.                .fold(

    20.                  initialValue,

    21.                  (Dispatch previousValue,

    22.                          Dispatch Function(Dispatch) element) =>

    23.                      element(previousValue),

    24.                );


    25.            return store;

    26.          };

    27. }

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

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

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

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

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