在开发 React + Redux 应用时，我们经常需要使用中间件来处理异步操作和副作用。Redux 中提供了 applyMiddleware 方法来使用中间件，但是如果需要同时使用多个中间件，就需要使用 redux 的 compose 方法将它们合并起来。
本文将介绍 compose 的使用方法和其在 React + Redux 应用中的应用场景，希望能对前端开发者有所帮助。
compose 使用方法
compose 方法的作用是将多个函数组合成一个函数，从右往左依次执行。例如：
const fn1 = x => x + 1; const fn2 = x => x * 2; const fn3 = x => x - 3; const composedFn = compose(fn3, fn2, fn1); const result = composedFn(3); console.log(result); // 7
上面的代码中，composedFn 将 fn3、fn2 和 fn1 组合成一个函数，执行结果为 fn3(fn2(fn1(3)))，即 ((3 + 1) * 2) - 3，最终结果为 7。
在 Redux 中，我们可以使用 compose 方法来组合应用的中间件，例如：
-- -------------------- ---- ------- ------ - ------------ ---------------- ------- - ---- -------- ------ ----- ---- -------------- ------ ------ ---- --------------- ----- ---------- - ------- -------- ----- ----- - ------------ -------- -------- ------------------------------- ----------------------------------- -- ------------------------------------- - --展开代码
上面的代码中，applyMiddleware 方法将中间件数组 middleware 应用到 store 中，window.__REDUX_DEVTOOLS_EXTENSION__ 则是用来启用 Redux 开发工具的。compose 方法将它们组合成一个新函数，从右往左依次执行，相当于：
store = applyMiddleward(...middleware)(window.__REDUX_DEVTOOLS_EXTENSION__(createStore))(reducer);
React + Redux 应用场景
在 React + Redux 应用中，我们经常需要使用一些中间件，例如 redux-thunk、redux-saga 等。此外，我们还可以使用自定义的中间件来处理一些具体的业务需求。
下面以 redux-thunk 中间件为例，介绍 compose 的应用场景。
redux-thunk 中间件可以处理 Redux 异步的 action，例如：
-- -------------------- ---- ------- ----- ----------- - -- -- ---------- -- - ------------------------ ------ ------------------------------- -------------- -- ---------------- ---------- -- - ------------------------------ -- ------------ -- - ----------------------------- --- --展开代码
上面的代码中，asyncAction 返回一个函数，该函数接受 dispatch 参数并返回一个 Promise。在函数中，我们可以像普通的 action 一样调用 dispatch 来派发其他 action，从而实现异步操作的流程控制。
如果需要同时使用多个中间件处理异步操作，我们可以使用 compose 将它们组合起来，例如：
const middleware = [thunk, logger, myMiddleware]; const store = createStore( reducer, compose( applyMiddleware(...middleware), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ) );
这段代码中，myMiddleware 是自定义的中间件，用于将某些 action 转发给其他页面的 iframe。
使用 compose 之后，可以将这些中间件组合成一个新函数，依次执行。在上面的例子中，首先会执行 thunk 中间件的 dispatch，然后是其他自定义中间件的处理，最后通过 logger 打印出日志。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67b71d1d306f20b3a63c6cc7
