1

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?

Shend Tytynxhiu
  • 127
  • 1
  • 9
  • 1
    If you want to use composeWithDevTools then why not use it [like it's documented](https://github.com/zalmoxisus/redux-devtools-extension#13-use-redux-devtools-extension-package-from-npm)? Leave out the `window.__REDUX_DEVTOOLS_EXTENSION__` part. – HMR Mar 25 '21 at 19:13

1 Answers1

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.

markerikson
  • 63,178
  • 10
  • 141
  • 157
  • Ok thank you for informing me about this new API. I have one question though so if I use the configure store API I don't I have to add "window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()" right? – Shend Tytynxhiu Mar 25 '21 at 19:03
  • 1
    I would like to add by providing option `devTools: process.env.NODE_ENV !== 'production',` to `configureStore`, we can turn the devtools off for production environment. – Ajeet Shah Mar 25 '21 at 19:03
  • 1
    And you can already do that by passing a boolean as the `devTools` option to `configureStore`, as shown here: https://redux-toolkit.js.org/api/configureStore#full-example – markerikson Mar 25 '21 at 19:04