Redux DevTools Extension for Electron

Simple installing and using Redux DevTools Extension on Electron

Installing

1npm install --save-dev electron-redux-devtools
2or
3npm install --save-dev firejune/electron-redux-devtools

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

1require('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:

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

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:

1+ /* eslint-disable no-underscore-dangle */
2  const store = createStore(
3   reducer, /* preloadedState, */
4   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
5  );
6+ /* 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:

1  import { createStore, applyMiddleware, compose } from 'redux';
2
3+ const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
4+ const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
5- const store = createStore(reducer, /* preloadedState, */ compose(
6    applyMiddleware(...middleware)
7  ));

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

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

1const composeEnhancers =
2  typeof window === 'object' &&
3  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
4    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
5      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
6    }) : compose;
7
8const enhancer = composeEnhancers(
9  applyMiddleware(...middleware),
10  // other store enhancers if any
11);
12const store = createStore(reducer, enhancer);

1.3 Use redux-devtools-extension

To use like so:

1import { createStore, applyMiddleware } from 'redux';
2import { composeWithDevTools } from 'electron-redux-devtools';
3
4const store = createStore(reducer, composeWithDevTools(
5  applyMiddleware(...middleware),
6  // other store enhancers if any
7));

To specify extension’s options:

1import { createStore, applyMiddleware } from 'redux';
2import { composeWithDevTools } from 'electron-redux-devtools';
3
4const composeEnhancers = composeWithDevTools({
5  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
6});
7const store = createStore(reducer, /* preloadedState, */ composeEnhancers(
8  applyMiddleware(...middleware),
9  // other store enhancers if any
10));

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

1import { createStore } from 'redux';
2import { devToolsEnhancer } from 'electron-redux-devtools';
3
4const store = createStore(reducer, /* preloadedState, */ devToolsEnhancer(
5  // Specify name here, actionsBlacklist, actionsCreators and other options if needed
6));