Redux DevTools Extension for Electron
Simple installing and using Redux DevTools Extension on Electron
Installing
npm install --save-dev electron-redux-devtoolsornpm install --save-dev firejune/electron-redux-devtools
Then execute the following from the Console tab of your running Electron app's developer tools:
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 : compose; const enhancer = ;const store = ;
redux-devtools-extension
1.3 Use To use like so:
;; const store = ;
To specify extension’s options:
;; const composeEnhancers = ;const store = ;
In case you don't include other enhancers and middlewares, just use devToolsEnhancer
:
;; const store = ;