在 React 中进行存储时，composeWithDevTools“需要 1 个参数，但出现 2 个错误”

Question

我正在 React 中进行存储，并且 Typescript 有一个问题，说 “composeWithDevTools 期望 1 个参数，但得到 2 个”。 我四处搜索，发现很多人都像我一样编写了代码，所以我找不到问题所在。是否有人可以解释为什么会出现此错误以及如何解决此问题？我真的很感激！

import { applyMiddleware, configureStore } from '@reduxjs/toolkit';
import { composeWithDevTools } from 'redux-devtools-extension';
import reducer from './modules/reducer';
import createSagaMiddleware from '@redux-saga/core';
import rootSaga from './modules/rootSaga';

const create = () => {
  const sagaMiddleware = createSagaMiddleware();
  const store = configureStore(
    reducer, 
    composeWithDevTools(applyMiddleware(sagaMiddleware))
    );

    sagaMiddleware.run(rootSaga);

  return store;
}

export default create;

以及错误消息。

这是我的软件包版本。

"packages": {
    "": {
      "name": "my-books",
      "version": "0.1.0",
      "dependencies": {
        "@reduxjs/toolkit": "^1.9.1",
        "@testing-library/jest-dom": "^5.16.5",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "@types/jest": "^27.5.2",
        "@types/node": "^16.18.10",
        "@types/react": "^18.0.26",
        "@types/react-dom": "^18.0.9",
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
        "react-error-boundary": "^3.1.4",
        "react-redux": "^8.0.5",
        "react-router-dom": "^6.6.0",
        "react-scripts": "5.0.1",
        "redux": "^4.2.0",
        "redux-actions": "^2.6.5",
        "redux-devtools-extension": "^2.13.9",
        "redux-saga": "^1.2.2",
        "typescript": "^4.9.4",
        "web-vitals": "^2.1.4"
      },
      "devDependencies": {
        "@types/react-redux": "^7.1.24",
        "@types/redux-actions": "^2.6.2"
      }

Answer 1

您正在混合 reduxcreateStore和 redux-toolkit之间的语法configureStore。

createStore接受 1-3 个参数：(reducer, [preloadedState], [enhancer])

configureStore接受 1 个参数，它是一个配置对象。

正确使用configureStore看起来像这样：

import { configureStore } from '@reduxjs/toolkit';
import reducer from './modules/reducer';
import createSagaMiddleware from '@redux-saga/core';
import rootSaga from './modules/rootSaga';

const create = () => {
  const sagaMiddleware = createSagaMiddleware();
  
  const store = configureStore({
    reducer,
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(sagaMiddleware)
  });

  sagaMiddleware.run(rootSaga);

  return store;
}

export default create;

您不需要composeWithDevToolswith configureStore，因为 DevTools 默认包含在内，并且可以自定义。

您也不需要调用，applyMiddleware因为这是内部处理的。这里我们采用默认值并添加sagaMiddleware.