Redux DevTools Extension

Implementation

1. Get the extension

• from Chrome Web Store
• or build it with npm i & npm run build:extension and load the extension's folder ./build/extension
• or run it in dev mode with npm i & npm start and load the extension's folder ./dev.

2. Use with Redux

Just update your configureStore:

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

  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 }

Note: passing enhancer as last argument requires redux@>=3.1.0. For older versions apply it like here or here.

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

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

Documentation

• FAQ
• API Reference
  • Apply as a Redux store enhancer
  • Create Redux store right in the extension
  • Communicate with the extension directly
    • open
    • notifyErrors
    • send
    • connect
    • disconnect
• Troubleshooting
• Change Log
• Feedback

📺 Videos

• Debugging flux applications in production at React Europe 2016
• Hot Reloading with Time Travel at React Europe 2015
• Getting Started with Redux DevTools Extension

Demo

Open these urls to test the extension:

• Counter
• TodoMVC
• Redux Form
• Redux Router
• Implemented in a Chrome app and extension

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

Credits

• Built using Crossbuilder boilerplate.
• Includes Dan Abramov's redux-devtools.
• Inspired from Taylor Hakes' work.
• The logo icon made by Keith Yong .
• Examples from Redux.

LICENSE

MIT

Created By

If you like this, follow @mdiordiev on twitter.