看起来您正在将几个商店增强器传递给 createStore() react-thunk

Posted 2023-02-22

【中文标题】看起来您正在将几个商店增强器传递给 createStore() react-thunk

【英文标题】：It looks like you are passing several store enhancers to createStore() react-thunk

【发布时间】：2021-06-22 15:07:52

【问题描述】：

我正在尝试使用 redux 并遇到一个问题，我找到了解决方案（这里：React Redux - Error passing several store enhancers to createStore()）但这不是我想要的解决方案。基本上，在创建我们这样做的 redux 商店时，我基本上和提问的人有同样的问题：

import  createStore, applyMiddleware  from "redux";
import  composeWithDevTools  from "redux-devtools-extension";
import reduxThunk from 'redux-thunk';
import rootReducer from "./reducers";

const store = createStore(
  rootReducer,
  composeWithDevTools(applyMiddleware(reduxThunk)),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

但是上面的代码不是创建商店的正确方法，显然你应该这样创建商店：

import  createStore, compose, applyMiddleware  from "redux";
import reduxThunk from "redux-thunk";
import rootReducer from "./reducers";

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancer(applyMiddleware(reduxThunk))
);

但是在上面的解决方案中，我没有使用我想要使用的 composeWithDevTools 模块。在这种情况下有没有办法使用composeWithDevTools，是否有必要使用composeWithDevTools？

【问题讨论】：

如果你想使用 composeWithDevTools 那么为什么不使用它like it's documented？省略 window.__REDUX_DEVTOOLS_EXTENSION__ 部分。

这也很有效，非常感谢！

【参考方案1】：

今天你应该使用 our official Redux Toolkit package 来编写你的 Redux 逻辑，尤其是 RTK's configureStore API。

configureStore 自动为您设置 Redux DevTools Extension，自动打开 thunk 中间件，如果需要，还可以轻松添加额外的存储增强器。

你展示的例子就是：

const store = configureStore(
  reducer: rootReducer
);

并且行为与您显示的完全相同。

【讨论】：

好的，感谢您通知我有关此新 API 的信息。我有一个问题，所以如果我使用配置商店 API，我不必添加“window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()”对吗？

我想通过提供选项devTools: process.env.NODE_ENV !== 'production',到configureStore来添加，我们可以在生产环境中关闭devtools。

您已经可以通过将布尔值作为devTools 选项传递给configureStore 来做到这一点，如下所示：redux-toolkit.js.org/api/configureStore#full-example