Debugging Redux

[Deleted user]

Debugging Redux can go in a few different directions. Right now I'm using the chrome extension to debug alongside remote devtools.

Here's how to get it going:

Install the Chrome extension and then npm i -D remote-redux-devtools. Then create a file called /store/configureStore.js in the src/app directory with the following contents:

import { createStore, applyMiddleware, compose } from 'redux'
import devTools from 'remote-redux-devtools'
import reducer from '../reducers'

export default function configureStore(initialState) {
  const enhancer = compose(
    applyMiddleware(),
    devTools()
  )
  return createStore(reducer, initialState, enhancer)
}

And finally update src/app/index.js to use the new configureStore method:

import configureStore from './store/configureStore'

import './components/bundle.scss'

const store = configureStore()

It might take a little more configuration (i.e. for react-router-redux), but that's the gist of it. Hope it's helpful!

[DimiMikadze]

It looks interesting, i'll take a look.

Thanks for feedback!

[Deleted user]

No problem. I'm got the remote debugger working yesterday with the above set-up, at least for debugging my custom reducers. Haven't tried using it yet with the router, but it's a good thing to have there too.

[DimiMikadze]

agreed, thanks!