How to implement Redux DevTools?

This is the index.js inside the root folder :

import { createStore, applyMiddleware } from "redux";
import rootReducer from "./reducers/reducers";

const store = applyMiddleware(ReduxPromise)(createStore);

ReactDOM.render(
  <Provider store={store(rootReducer)}>
    <App />
  </Provider>,
  document.getElementById("root")
);

To be able to use Redux DevTools I need to add this line of code:

window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

I tried this:

import { createStore, applyMiddleware, compose } from "redux";
import rootReducer from "./reducers/reducers";

const initialState = {};

const middleware = [ReduxPromise];

const store = createStore(
  rootReducer,
  initialState,
  compose(
    applyMiddleware(...middleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  )
);

ReactDOM.render(
  <Provider store={store(rootReducer)}>
    <App />
  </Provider>,
  document.getElementById("root")
);

But then I get the error: TypeError: store is not a function

What am I doing wrong?

Does the example otherwise work if you remove the DevTools function call on the window object?

The first code, without (ReduxDevTool) is working fine. But my code is not working.
Please forget my code. How can I implement the Redux DevTools in the first code?

What npm package or documentation are you relying on? From my google search, there seem to be a handful of approaches for enabling the DevTools.

For the provider, you just provide the store as a value, not call it as a function - since its not, as the error “TypeError: store is not a function” indicates. rootReducer was already given to the store when you created it. All you need is.

<Provider store={store}>
1 Like