@syed_umair/electron-redux
v1.5.8
Published
Use redux in the main and browser process in electron
Downloads
35
Maintainers
Readme
electron-redux
Motivation
Using redux with electron poses a couple of problems. Processes (main and renderer) are completely isolated, and the only mode of communication is IPC.
- Where do you keep the state?
- How do you keep the state in sync across processes?
The solution
electron-redux
offers an easy to use solution. The redux store on the main process becomes the single source of truth, and stores in the renderer processes become mere proxies. See under the hood.
Install
npm install --save electron-redux
electron-redux
comes as redux middleware that is really easy to apply:
// in the main store
import { forwardToRenderer, triggerAlias, replayActionMain } from 'electron-redux';
const todoApp = combineReducers(reducers);
const store = createStore(
todoApp,
initialState, // optional
applyMiddleware(
triggerAlias, // optional, see below
...otherMiddleware,
forwardToRenderer, // IMPORTANT! This goes last
),
);
replayActionMain(store);
// in the renderer store
import { forwardToMain, replayActionRenderer, getInitialStateRenderer } from 'electron-redux';
const todoApp = combineReducers(reducers);
const initialState = getInitialStateRenderer();
const store = createStore(
todoApp,
initialState,
applyMiddleware(
forwardToMain, // IMPORTANT! This goes first
...otherMiddleware,
),
);
replayActionRenderer(store);
Check out timesheets for a more advanced example.
And that's it! You are now ready to fire actions without having to worry about synchronising your state between processes.
Actions
Actions fired MUST be FSA-compliant, i.e. have a type
and payload
property. Any actions not passing this test will be ignored and simply passed through to the next middleware.
NB:
redux-thunk
is not FSA-compliant out of the box, but can still produce compatible actions once the async action fires.
Furthermore, actions (and that includes payload
s) MUST be (de-)serialisable, i.e. either POJOs (simple object
s - that excludes native JavaScript or DOM objects like FileList
, Map
, etc.), array
s, or primitives. For workarounds, check out aliased actions
Local actions (renderer process)
By default, all actions are being broadcast from the main store to the renderer processes. However, some state should only live in the renderer (e.g. isPanelOpen
). electron-redux
introduces the concept of action scopes.
To stop an action from propagating from renderer to main store, simply set the scope to local
:
function myLocalActionCreator() {
return {
type: 'MY_ACTION',
payload: 123,
meta: {
scope: 'local',
},
};
}
Aliased actions (main process)
Most actions will originate from the renderer side, but not all should be executed there as well. A great example is fetching of data from an external source, e.g. using promise middleware, which should only ever be executed once (i.e. in the main process). This can be achieved using the triggerAlias
middleware mentioned above.
Using the createAliasedAction
helper, you can quite easily create actions that are are only being executed in the main process, and the result of which is being broadcast to the renderer processes.
import { createAliasedAction } from 'electron-redux';
export const importGithubProjects = createAliasedAction(
'IMPORT_GITHUB_PROJECTS', // unique identifier
(accessToken, repoFullName) => ({
type: 'IMPORT_GITHUB_PROJECTS',
payload: importProjects(accessToken, repoFullName),
}),
);
Check out timesheets for more examples.
Blacklisted actions
By default actions of certain type (e.g. starting with '@@') are not propagated to the main thread. You can change this behaviour by using forwardToMainWithParams
function.
// in the renderer store
import {
forwardToMainWithParams,
replayActionRenderer,
getInitialStateRenderer,
} from 'electron-redux';
const todoApp = combineReducers(reducers);
const initialState = getInitialStateRenderer();
const store = createStore(
todoApp,
initialState,
applyMiddleware(
forwardToMainWithParams(), // IMPORTANT! This goes first
...otherMiddleware,
),
);
replayActionRenderer(store);
You can specify patterns for actions that should not be propagated to the main thread.
forwardToMainWithParams({
blacklist: [/^@@/, /^redux-form/],
});
Contributions
Contributions via issues or pull requests are hugely welcome!
Feel free to let me know whether you're successfully using electron-redux
in your project and I'm happy to add them here as well!
Contributors
Special thanks go out to:
- Charlie Hess
- Roman Paradeev
- Pelle Jacobs
- Victor Quiroz Castro
- musou1500
- Everyone who has contributed by asking questions & raising issues 🚀