美文网首页React Native
深入 Reudx 之 applyMiddleware

深入 Reudx 之 applyMiddleware

作者: yuzhiyi_宇 | 来源:发表于2018-03-04 17:22 被阅读10次

前言

"It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer."
这是 Redux 作者 Dan Abramov 对 middleware 的描述。它提供了一个分类处理 action 的机会。在 middleware 中,你可以检阅每一个流过的 action,挑选除特定类型的 action 进行相应操作,给你一个改变 action 的机会。

面对多样的业务场景,单纯地修改 dispatch 或 reducer 的代码显然不具有普适性,需要的是可以组合的,自由插拔的插件机制,Redux 借鉴了 Koa 里 middleware 的思想。Redux 中 reducer 更关系的是数据的转化逻辑,所以middleware就是为了增强 dispatch 而出现。

Redux源码之 applyMiddleware

解读 redux 源码之 applyMiddleware,代码目录在 redux/src/applyMiddleware。
对应 redux 版本:3.7.2。

import compose from './compose'

/**
 * 创建一个将中间件应用于调度方法的存储增强器的 Redux store。这对于表达
 * 各种任务而言非常方便,比如简洁的异步执行操作,或者记录每次 action 
 * payload。
 *
 * 请参阅 `redux-thunk`作为 Redux 中间件的实例。
 *
 * 因为中间件可能是异步,所以这应该是第一个 store 增强器在组成链。
 *
 * 请注意,每个中间件都将被赋予`dispatch`和`getState`功能。
 *
 * @param {...Function} middlewares 要应用的中间件链。
 * @param {Function} 应用中间件的 store 增减器。
 */
export default function applyMiddleware(...middlewares) {
  return (createStore) => (reducer, preloadedState, enhancer) => {
    const store = createStore(reducer, preloadedState, enhancer)
    let dispatch = store.dispatch
    let chain = []

    const middlewareAPI = {
      getState: store.getState,
      dispatch: (action) => dispatch(action)
    }
    chain = middlewares.map(middleware => middleware(middlewareAPI))
    dispatch = compose(...chain)(store.dispatch)

    return {
      ...store,
      dispatch
    }
  }
}

相关文章

网友评论

    本文标题:深入 Reudx 之 applyMiddleware

    本文链接:https://www.haomeiwen.com/subject/orerxftx.html