reactjs - 在 React 中进行存储时 composeWithDevTools 'expected 1 argument, but got 2 error'

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

您正在混合 redux 的 createStore 和 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;

您不需要将 composeWithDevTools 与 configureStore 一起使用，因为默认情况下包含 DevTools，并且 can be customized .

您也不需要调用 applyMiddleware 因为那是 handled internally 。这里我们取the defaults并添加sagaMiddleware。