這篇文章主要為大家展示了“Fish Redux中的Dispatch如何實(shí)現(xiàn)”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“Fish Redux中的Dispatch如何實(shí)現(xiàn)”這篇文章吧。

創(chuàng)新互聯(lián)專業(yè)提供成都主機(jī)托管四川主機(jī)托管成都服務(wù)器托管四川服務(wù)器托管，支持按月付款！我們的承諾：貴族品質(zhì)、平民價(jià)格，機(jī)房位于中國(guó)電信/網(wǎng)通/移動(dòng)機(jī)房，四川電信科技城機(jī)房服務(wù)有保障！前言

我們?cè)谑褂胒ish-redux構(gòu)建應(yīng)用的時(shí)候，界面代碼（view）和事件的處理邏輯（reducer，effect）是完全解耦的，界面需要處理事件的時(shí)候?qū)ction分發(fā)給對(duì)應(yīng)的事件處理邏輯去進(jìn)行處理，而這個(gè)分發(fā)的過(guò)程就是下面要講的dispatch， 通過(guò)本篇的內(nèi)容，你可以更深刻的理解一個(gè)action是如何一步步去進(jìn)行分發(fā)的。

從example開(kāi)始

為了更好的理解action的dispatch過(guò)程，我們就先以todolistpage中一條todo條目的勾選事件為例，來(lái)看點(diǎn)擊后事件的傳遞過(guò)程，通過(guò)斷點(diǎn)debug我們很容易就能夠發(fā)現(xiàn)點(diǎn)擊時(shí)候發(fā)生的一切，具體過(guò)程如下：

1. 用戶點(diǎn)擊勾選框，GestureDetector的onTap會(huì)被回調(diào)

2. 通過(guò)buildView傳入的dispatch函數(shù)對(duì)doneAction進(jìn)行分發(fā)，發(fā)現(xiàn)todo_component的effect中無(wú)法處理此doneAction，所以將其交給pageStore的dispatch繼續(xù)進(jìn)行分發(fā)

3. pageStore的dispatch會(huì)將action交給reducer進(jìn)行處理，故doneAction對(duì)應(yīng)的_markDone會(huì)被執(zhí)行，對(duì)state進(jìn)行clone，并修改clone后的state的狀態(tài)，然后將這個(gè)全新的state返回

4. 然后pageStore的dispatch會(huì)通知所有的listeners，其中負(fù)責(zé)界面重繪的_viewUpdater發(fā)現(xiàn)state發(fā)生變化，通知界面進(jìn)行重繪更新

Dispatch實(shí)現(xiàn)分析

Dispatch在fish-redux中的定義如下

typedef Dispatch = void Function(Action action);

本質(zhì)上就是一個(gè)action的處理函數(shù)，接受一個(gè)action，然后對(duì)action進(jìn)行分發(fā)。

下面我門(mén)通過(guò)源碼來(lái)進(jìn)行詳細(xì)的分析。

0component->ComponentWidget->ComponentState->_mainCtx->_dispatch而 _mainCtx的初始化則是通過(guò)componet的createContext方法來(lái)創(chuàng)建的，順著方法下去我們看到了dispatch的初始化

// redux_component/context.dart DefaultContext初始化方法
  DefaultContext({
    @required this.factors,
    @required this.store,
    @required BuildContext buildContext,
    @required this.getState,
  })  : assert(factors != null),
        assert(store != null),
        assert(buildContext != null),
        assert(getState != null),
        _buildContext = buildContext {
    final OnAction onAction = factors.createHandlerOnAction(this);
    /// create Dispatch
    _dispatch = factors.createDispatch(onAction, this, store.dispatch);
    /// Register inter-component broadcast
    _onBroadcast =
        factors.createHandlerOnBroadcast(onAction, this, store.dispatch);
    registerOnDisposed(store.registerReceiver(_onBroadcast));
  }

context中的dispatch是通過(guò)factors來(lái)進(jìn)行創(chuàng)建的，factors其實(shí)就是當(dāng)前component，factors創(chuàng)建dispatch的時(shí)候傳入了onAction函數(shù),以及context自己和store的dispatch。onAction主要是進(jìn)行Effect處理。這邊還可以看到，進(jìn)行context初始化的最后，還將自己的onAction包裝注冊(cè)到store的廣播中去，這樣就可以接收到別人發(fā)出的action廣播。

Component繼承自Logic

// redux_component/logic.dart
  @override
  Dispatch createDispatch(
      OnAction onAction, Context ctx, Dispatch parentDispatch) {
    Dispatch dispatch = (Action action) {
      throw Exception(
          'Dispatching while appending your effect & onError to dispatch is not allowed.');
    };
    /// attach to store.dispatch
    dispatch = _applyOnAction(onAction, ctx)(
      dispatch: (Action action) => dispatch(action),
      getState: () => ctx.state,
    )(parentDispatch);
    return dispatch;
  }
    static Middleware _applyOnAction(OnAction onAction, Context ctx) {
    return ({Dispatch dispatch, Get getState}) {
      return (Dispatch next) {
        return (Action action) {
          final Object result = onAction?.call(action);
          if (result != null && result != false) {
            return;
          }
          //skip-lifecycle-actions
          if (action.type is Lifecycle) {
            return;
          }
          if (!shouldBeInterruptedBeforeReducer(action)) {
            ctx.pageBroadcast(action);
          }
          next(action);
        };
      };
    };
  }
}

上面分發(fā)的邏輯大概可以通過(guò)上圖來(lái)表示

1. 通過(guò)onAction將action交給component對(duì)應(yīng)的effect進(jìn)行處理

2. 當(dāng)effect無(wú)法處理此action，且此action非lifecycle-actions，且不需中斷則廣播給當(dāng)前Page的其余所有effects

3. 最后就是繼續(xù)將action分發(fā)給store的dispatch(parentDispatch傳入的其實(shí)就是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過(guò)程比較簡(jiǎn)單，主要就是進(jìn)行reducer的調(diào)用，處理完成后通知監(jiān)聽(tīng)者。

0

• // redux_component/component.dart

•  Widget buildPage(P param) {

•    return wrapper(_PageWidget(

•      component: this,

•      storeBuilder: () => createPageStore(

•            initState(param),

•            reducer,

•            applyMiddleware(buildMiddleware(middleware)),

•          ),

•    ));

•  }

• // redux_component/page_store.dart

• PageStore createPageStore(T preloadedState, Reducer reducer,

•        [StoreEnhancer enhancer]) =>

•    _PageStore(createStore(preloadedState, reducer, enhancer));

• // redux/create_store.dart

• Store createStore(T preloadedState, Reducer reducer,

•        [StoreEnhancer enhancer]) =>

•    enhancer != null

•        ? enhancer(_createStore)(preloadedState, reducer)

•        : _createStore(preloadedState, reducer);

所以這里可以看到，當(dāng)傳入enhancer時(shí)，createStore的工作被enhancer代理了，會(huì)返回一個(gè)經(jīng)過(guò)enhancer處理過(guò)的store。而PageStore創(chuàng)建的時(shí)候傳入的是中間件的enhancer。

// redux/apply_middleware.dart
StoreEnhancer applyMiddleware(List> middleware) {
  return middleware == null || middleware.isEmpty
      ? null
      : (StoreCreator creator) => (T initState, Reducer reducer) {
            assert(middleware != null && middleware.isNotEmpty);
            final Store store = creator(initState, reducer);
            final Dispatch initialValue = store.dispatch;
            store.dispatch = (Action action) {
              throw Exception(
                  'Dispatching while constructing your middleware is not allowed. '
                  'Other middleware would not be applied to this dispatch.');
            };
            store.dispatch = middleware
                .map((Middleware middleware) => middleware(
                      dispatch: (Action action) => store.dispatch(action),
                      getState: store.getState,
                    ))
                .fold(
                  initialValue,
                  (Dispatch previousValue,
                          Dispatch Function(Dispatch) element) =>
                      element(previousValue),
                );
            return store;
          };
}

這里的邏輯其實(shí)就是將所有的middleware的處理函數(shù)都串到store的dispatch，這樣當(dāng)store進(jìn)行dispatch的時(shí)候所有的中間件的處理函數(shù)也會(huì)被調(diào)用。下面為各個(gè)處理函數(shù)的執(zhí)行順序，



首先還是component中的dispatch D1 會(huì)被執(zhí)行，然后傳遞給store的dispatch，而此時(shí)store的dispatch已經(jīng)經(jīng)過(guò)中間件的增強(qiáng)，所以會(huì)執(zhí)行中間件的處理函數(shù)，最終store的原始dispatch函數(shù)D2會(huì)被執(zhí)行。

以上是“Fish Redux中的Dispatch如何實(shí)現(xiàn)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

名稱欄目：FishRedux中的Dispatch如何實(shí)現(xiàn)-創(chuàng)新互聯(lián)
文章起源：http://weahome.cn/article/dpgdgi.html