electron-redux

electron-redux

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:

import { forwardToMain, forwardToRenderer, triggerAlias } from 'electron-redux';

const todoApp = combineReducers(reducers)

// in the renderer store
const store = createStore(
  todoApp,
  applyMiddleware(
    forwardToMain, // IMPORTANT! This goes first
    ...otherMiddleware,
  )
)

// in the main store
const store = createStore(
  todoApp,
  applyMiddleware(
    triggerAlias, // optional, see below
    ...otherMiddleware,
    forwardToRenderer, // IMPORTANT! This goes last
  )
)

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 should be FSA-compliant, i.e. have a type and payload property.

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 be fired 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. 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.

Under the hood

TODO

• forwardToMain
• forwardToRenderer
• triggerAlias