Redux：在没有它的情况下使用 compose() 或 applyMiddleware 之间的区别？答案

【问题标题】：Redux: Difference between using compose() or applyMiddleware without it?Redux：在没有它的情况下使用 compose() 或 applyMiddleware 之间的区别？
【发布时间】：2020-12-10 23:28:38
【问题描述】：

我以前也有过这样的情况：

  createStore(reducers, {}, applyMiddleware(reduxThunk));

刚刚在某处看到了一段不同的代码，现在将我的代码更改为这个，使用compose：

  createStore(reducers, {}, compose(applyMiddleware(reduxThunk)))

到目前为止，两者都运行良好。但我不完全理解其中的区别。我之前做错了吗？有人可以向我解释一下吗？

【问题讨论】：

标签： javascript redux react-redux middleware redux-thunk

【解决方案1】：

来自 redux 文档：

提示 compose 所做的就是让您编写深度嵌套的函数转换，而无需代码向右漂移。不要太相信它！

您还可以添加一些不同于 thunk 和中间件的增强功能。看看这个comment

【讨论】：

【解决方案2】：

“商店增强器”是一种特定类型的 Redux 插件，它包裹在商店周围以赋予其额外的能力。

createStore 接受单个商店增强器作为参数，并使用它来自定义创建的商店。

这意味着，如果您想一次使用多个商店增强器，您需要一种方法将它们组合成一个商店增强器，以便您可以将其传递给createStore。

applyMiddleware 是一个存储增强器，因此您可以直接使用它并将其结果作为唯一的增强器传递给createStore。

如果您想使用多个增强器，例如applyMiddleware 和devTools，您需要使用compose() 将它们组合在一起。

请注意，您确实应该使用our official Redux Toolkit package，其中有a configureStore API，它已经通过一行代码为您正确设置了一个Redux存储。

【讨论】：

【解决方案3】：

@markerikson 是对的。两者都运行良好。

如果你正在开发简单的 React 应用，第一个就足够了。
如果您处理大型项目，则需要使用第二个。如下：

const history = createHistory(); const sagaMiddleware = createSagaMiddleware(); const routeMiddleware = routerMiddleware(history); const 中间件 = [thunk, sagaMiddleware, routeMiddleware];

const composeEnhancers = (window['REDUX_DEVTOOLS_EXTENSION_COMPOSE'] as typeof compose) ||撰写；

常量存储 = createStore( 组合减速器（{ ...减速机，路由器：connectRouter（历史）， }), composeEnhancers(applyMiddleware(...middlewares)), );

【讨论】：