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

##📺 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

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.

gitter-badger / redux-devtools-extension Goto Github PK