Redux DevTools Extension

Usage

1. Get the extension

1.1 For Chrome

• 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.

1.2 For Firefox

• from AMO
• or build it with npm i & npm run build:firefox and load the extension's folder ./build/firefox.

1.3 For Electron

• just specify REDUX_DEVTOOLS in electron-devtools-installer.

1.4 For other browsers and non-browser environment

• apply remote-redux-devtools.

2. Use with Redux

2.1 Basic store

If you have a basic store as described in the official redux-docs, simply replace:

let store = createStore(reducer);

with

let store = createStore(reducer, window.devToolsExtension && window.devToolsExtension());

2.2 Advanced store setup

• If you setup your store with middleware and enhancers, change this:

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

let store = createStore(reducer, initialState, compose(
  applyMiddleware(...middleware)
));

to this:

let store = createStore(reducer, initialState, compose(
  applyMiddleware(...middleware),
  window.devToolsExtension ? window.devToolsExtension() : f => f
));

• Or with initialState but without middleware and enhancers arguments:

let store = createStore(reducer, initialState, 
  window.devToolsExtension && window.devToolsExtension()
);

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

2.3 Together with Redux DevTools

You can use this extension 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 }

3. Use with universal (isomorphic) apps

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

4. 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.