zoukankan      html  css  js  c++  java
  • applyMiddleware 沉思录

    let newStore = applyMiddleware(mid1, mid2, mid3, ...)(createStore)(reducer, null);

    给({ getState, dispatch }) => next => action签名的函数组分步赋值并进行串联的过程;

    整体上是dispatch的method swizzling;

    export default function applyMiddleware(...middlewares) {

      return (next)  =>

         (reducer, initialState) => {

            var store = next(reducer, initialState);

            var dispatch = store.dispatch;

            var chain = [];

    //({ getState, dispatch })

            var middlewareAPI = {

              getState: store.getState,

              dispatch: (action) => dispatch(action)

            };

    //({ getState, dispatch })

            chain = middlewares.map(middleware => middleware(middlewareAPI));

    //next

            dispatch = compose(...chain, store.dispatch);

            return {

              ...store,

              dispatch

            };

       };

    }

    export default store => next => action => {

        console.log('dispatch:', action);

        next(action);

        console.log('finish:', action);

    }

    export default ({ getState, dispatch }) => next => action => {

        console.log('dispatch:', action);

        next(action);

        console.log('finish:', action);

    }

    function compose(...funs) {

           return arg => funcs.reduceRight( (compose, f) => f(composed), arg)

       }

    https://www.cnblogs.com/fe-linjin/p/10494763.html

    https://stackoverflow.com/questions/41139585/what-is-the-next-in-applymiddleware

    ...middlewares (arguments): 遵循 Redux middleware API 的函数。每个 middleware 接受 StoredispatchgetState 函数作为命名参数,并返回一个函数。该函数会被传入 被称为 next 的下一个 middleware 的 dispatch 方法,并返回一个接收 action 的新函数,这个函数可以直接调用 next(action),或者在其他需要的时刻调用,甚至根本不去调用它。调用链中最后一个 middleware 会接受真实的 store 的 dispatch 方法作为 next 参数,并借此结束调用链。所以,middleware 的函数签名是 ({ getState, dispatch }) => next => action。

    https://www.redux.org.cn/docs/api/applyMiddleware.html

  • 相关阅读:
    vue-cli3 中跨域解决方案
    自定义超链接动画---transition
    Vue 单选框与单选框组 组件
    js 控制随机数生成概率
    Vue slot插槽
    vue 组件通信
    vue中computed计算属性与methods对象中的this指针
    C#提取html中的汉字
    MVC几种找不到资源的解决方式
    使用Windows服务定时去执行一个方法的三种方式
  • 原文地址:https://www.cnblogs.com/feng9exe/p/11175413.html
Copyright © 2011-2022 走看看