It looks like you are passing several store enhancers to createStore() react-thunk

Question

I was experimenting with redux for a bit and came across a problem, I found the solution( here: React Redux - Error passing several store enhancers to createStore()) however this is not the solution I wanted. Basically I have the same problem as the person asking the question basically when creating the redux store we did this:

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__()
);

But the code above is not the correct way of creating the store, apparently you should create the store is like this:

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))
);

However in the solution above I am not using the composeWithDevTools module which is what I wanted to use. Is there a way to use composeWithDevTools in this case and is it necessary to use composeWithDevTools?

Answer 1

Today you should be using our official Redux Toolkit package to write your Redux logic, and in particular, RTK's configureStore API.

configureStore automatically sets up the Redux DevTools Extension for you, automatically turns on the thunk middleware, and also makes it very easy to add additional store enhancers if desired.

The example you're showing would simply be:

const store = configureStore({
  reducer: rootReducer
});

and the behavior is exactly the same as what you showed.