Redux DevTools Extension

Demo

Implementation

1. Get the extension

2. Use with Redux

Just update your configureStore:

export default function configureStore(initialState) {
  const store = createStore(reducer, initialState, compose(
    applyMiddleware(...middleware)
  ));
  return store;
}

becomes

export default function configureStore(initialState) {
  const store = createStore(reducer, initialState, compose(
    applyMiddleware(...middleware),
    window.devToolsExtension ? window.devToolsExtension() : f => f
  ));
  return store;
}

or if you don't have other store enhancers and middlewares:

export default function configureStore(initialState) {
  const store = createStore(reducer, initialState, 
    window.devToolsExtension && window.devToolsExtension()
  );
  return store;
}

or for universal (isomorphic) apps

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

You can use it together with vanilla Redux DevTools as a fallback, but not both simultaneously:

window.devToolsExtension ? window.devToolsExtension() : DevTools.instrument()

Make sure not to render DevTools when using the extension or you'll probably want to render the monitor from vanilla DevTools as follows:

{ !window.devToolsExtension ? <DevTools /> : null }

For React Native, hybrid, desktop and server side Redux apps

Include Remote Redux DevTools, and on the extension's context choose 'Open Remote DevTools' or press Alt+Shift+arrow up for remote monitoring.

Documentation

Videos

Demo

Open these urls to test the extension:

Also you may run them from ./examples folder (on port 4001 and 4002 by default).

Credits

LICENSE

MIT

Created By

If you like this, follow @mdiordiev on twitter.