composeWithDevTools 'expected 1 argument, but got 2 error' while making store in React

Question

I was making store in React and I have an issue with Typescript saying that "composeWithDevTools expected 1 argument, but got 2". I searched around and I found many people wrote code like me so I couldn't find what the issue is🥲 Is there anybody can explain why this error occurs and how I can fix this? I would really appreciate it!

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;

And the error message.

And this is my packages version.

"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

You are mixing syntaxes between redux's createStore and redux-toolkit's configureStore.

createStore accepts 1-3 arguments: (reducer, [preloadedState], [enhancer])

configureStore accepts 1 argument, which is a configuration object.

Proper use of configureStore looks like this:

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;

You don't need composeWithDevTools with configureStore because DevTools is included by default, and can be customized.

You also don't need to call applyMiddleware as that is handled internally. Here we are taking the defaults and adding sagaMiddleware.