How to implement Redux DevTools?


#1

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?


#2

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


#3

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?


#4

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.


#5

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}>