Redux DevTools Extension for Electron

Simple installing and using Redux DevTools Extension on Electron

Installing

npm install --save-dev electron-redux-devtools
or
npm install --save-dev firejune/electron-redux-devtools

Then execute the following from the Console tab of your running Electron app's developer tools:

require('electron-react-devtools').install()

And than refresh or restart the renderer process, you can see a Redux tab added.

Connecting Redux Store

1.1 Basic store

For a basic Redux store simply add:

 const store = createStore(
   reducer, /* preloadedState, */
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );

Note that preloadedState argument is optional in Redux' createStore.

For universal ("isomorphic") apps, prefix it with typeof window !== 'undefined' &&.

In case ESLint is configured to not allow using the underscore dangle, wrap it like so:

+ /* eslint-disable no-underscore-dangle */
  const store = createStore(
   reducer, /* preloadedState, */
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );
+ /* eslint-enable */

You don't need to npm install redux-devtools when using the extension (that's a different lib).

1.2 Advanced store setup

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

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

+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
- const store = createStore(reducer, /* preloadedState, */ compose(
    applyMiddleware(...middleware)
  ));

Note that when the extension is not installed, we’re using Redux compose here.

To specify extension’s options, use it like so:

const composeEnhancers =
  typeof window === 'object' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
    }) : compose;

const enhancer = composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
);
const store = createStore(reducer, enhancer);

1.3 Use redux-devtools-extension

To use like so:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'electron-redux-devtools';

const store = createStore(reducer, composeWithDevTools(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

To specify extension’s options:

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'electron-redux-devtools';

const composeEnhancers = composeWithDevTools({
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
});
const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
  applyMiddleware(...middleware),
  // other store enhancers if any
));

In case you don't include other enhancers and middlewares, just use devToolsEnhancer:

import { createStore } from 'redux';
import { devToolsEnhancer } from 'electron-redux-devtools';

const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
));