Configure a redux store with redux devtools (the chrome extension)

Question

I am using the following boilerplate example and I'm trying to configure it to work with the chrome extension for redux devtools:

import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import apiMiddleware from '../middleware/api'
import createLogger from 'redux-logger'
import rootReducer from '../reducers'


const logger = createLogger({
  level: 'info',
  collapsed: false,
  logger: console,
  predicate: (getState, action) => true
})

const createStoreWithMiddleware = applyMiddleware(
  thunkMiddleware,
  apiMiddleware,
  logger
)(createStore)

export default function configureStore(initialState) {
  const store = createStoreWithMiddleware(rootReducer, initialState)

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept('../reducers', () => {
      const nextRootReducer = require('../reducers')
      store.replaceReducer(nextRootReducer)
    })
  }

  return store

}

I've tried adding it as follows, but I'm getting a window not defined error:

import { compose, createStore, applyMiddleware } from 'redux'

const createStoreWithMiddleware = compose(applyMiddleware(
  thunkMiddleware,
  apiMiddleware,
  logger
),window.devToolsExtension ? window.devToolsExtension() : f => f)(createStore)

I'm assuming the structure is somehow different, than the one given in the reudx-devtools extension example pages, but I can't put my finger on it.

How do I setup the store with middlewares and enhancements the right way?

This video explains how to connect redux devtool to basic react redux app - https://youtu.be/TSOVLXQPWgA — Prem, Nov 18 '17 at 05:56

score 2 · Accepted Answer · answered Jun 15 '16 at 07:06

2

typeof window === 'object' && typeof window.devToolsExtension !== 'undefined'
  ? window.devToolsExtension()
  : f => f

This should fix the error.

answered Jun 15 '16 at 07:06

xiaofan2406

3,250
5
26
34

@S.Schenk I am unsure of how you are running your React app (webpack-dev-server? express?). I had the similar issue when I was trying to server-rendering my React app, because ```window``` is only available for browsers. So in your code, simply check if ```window``` exist, then you can avoid the error. – xiaofan2406 Jun 17 '16 at 02:06
That did the trick, thanks! Someone should really update the docs – S. Schenk Jun 17 '16 at 14:05

score 0 · Answer 2 · answered Dec 18 '20 at 11:54

0

import {createStore, applyMiddleware, compose} from 'redux'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
    
const store = createStore(reducers, composeEnhancers(applyMiddleware()))

answered Dec 18 '20 at 11:54

Naved Khan

1,699
16
13

Configure a redux store with redux devtools (the chrome extension)

2 Answers2