Redux 源码: applyMiddleware 的实现过程及使用

前言

Redux 是一个非常流行的 JavaScript 状态管理库。在 Redux 应用程序中，我们通常使用 middleware 来处理异步操作和其他非常规行为。Redux 中的 applyMiddleware 函数允许我们轻松地添加 middleware 到 Redux 应用程序中。本文将讨论 applyMiddleware 函数的实现过程及其使用。

applyMiddleware 的实现

applyMiddleware 函数接受一系列 middleware 函数作为参数，返回一个函数，该函数接受 createStore 函数作为参数，并返回一个新的增强版的 createStore 函数。

function applyMiddleware(...middlewares) {
  return createStore => (...args) => {
    const store = createStore(...args)
    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
    }
  }
}

我们可以看到，applyMiddleware 函数的核心是一个高阶函数，它接受 createStore 函数作为参数，并返回一个新的函数。在新函数中，我们首先调用原始的 createStore 函数来创建一个新的 store 实例。然后，我们创建一个 dispatch 变量，它的初始值为原始 store 实例的 dispatch 方法。接下来，我们创建一个 middlewareAPI 对象，它包含 getState 和 dispatch 两个方法。

接下来，我们遍历 middleware 数组，对每个 middleware 调用它，并传递 middlewareAPI 对象作为参数。每个 middleware 都返回一个函数，这个函数接受 next 参数，并返回一个新的函数。这个新函数接受 action 参数，并将它传递给下一个 middleware 或原始的 dispatch 方法。

通过这种方式，我们创建了一个 middleware 链。最后，我们使用 compose 函数将 middleware 链组合成一个函数，并将它赋值给 dispatch 变量。最后，我们返回一个新的 store 实例，它的 dispatch 方法已经被 middleware 包装过了。

applyMiddleware 的使用

下面是一个使用 applyMiddleware 函数的示例：

import { createStore, applyMiddleware } from 'redux'
import thunk from 'redux-thunk'
import logger from 'redux-logger'
import rootReducer from './reducers'

const middleware = [thunk, logger]

const store = applyMiddleware(...middleware)(createStore)(rootReducer)

export default store

在这个示例中，我们使用 applyMiddleware 函数将两个 middleware（thunk 和 logger）添加到 Redux 应用程序中。我们首先将这些 middleware 放入一个数组中，然后将它们作为参数传递给 applyMiddleware 函数。我们将返回的函数再次调用，并将 rootReducer 作为参数传递给它，以创建一个增强版的 createStore 函数。最后，我们使用增强版的 createStore 函数创建一个新的 store 实例。

总结

在 Redux 应用程序中，middleware 是非常重要的。applyMiddleware 函数允许我们轻松地添加 middleware 到 Redux 应用程序中。在本文中，我们深入探讨了 applyMiddleware 函数的实现过程及其使用。通过理解 applyMiddleware 函数的实现过程，我们可以更好地理解 Redux 应用程序中 middleware 的工作原理。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658f852feb4cecbf2d527024