gaearon / redux-electron-store

A redux implementation that synchronizes itself between Electron processes

redux-electron-store

This library solves the problem of synchronizing Redux stores in Electron apps. Electron is based on Chromium, and thus all Electron apps have a single main process and (potentially) multiple renderer processes, one for each web page. redux-electron-store allows us to define a store per process, and uses ipc to keep them in sync in an efficient manner. It is implemented as a redux store enhancer.

This library only works if the data in your store is immutable, as objects are compared by reference to determine changes.

Installation

npm i redux-electron-store

Usage

Main Process

import { electronEnhancer } from 'redux-electron-store';

let finalCreateStore = compose(
  applyMiddleware(...middleware),
  electronEnhancer()
)(createStore);

let store = finalCreateStore(reducer);

Renderer / Webview Process

In the renderer process, the store will handle the filter property in its parameter. filter is a way of describing exactly what data this renderer process wishes to be notified of. If a filter is provided, all updates which do not change a property which passes the filter will not be forwarded to the current renderer.

let filter = {
  notifications: true,
  settings: true
};

let finalCreateStore = compose(
  applyMiddleware(...middleware),
  electronEnhancer({filter}),
  DevTools.instrument()
)(createStore);

Filters

A filter can be an object, a function, or true.

If the filter is true, the entire variable will pass through the filter.

If the filter is a function, the function will be called with the variable the filter is acting on as a parameter, and the return value of the function must itself be a filter (either an object or true)

If the filter is an object, its keys must be properties of the variable the filter is acting on, and its values are themselves filters which describe the value(s) of that property that will pass through the filter.

Example Problem:

I am creating a Notifications window for Slack's application. For this to work, I need to know the position to display the notifications, the notifications themselves, and the icons for each team to display as a thumbnail. Any other data in my app has no bearing on this window, therefore it would be a waste for this window to have updates for any other data sent to it.

Solution:

// Note: The Lodash library is being used here as _
let filter = {
  notifications: true,
  settings: {
    notifyPosition: true
  },
  teams: (teams) => {
    return _.mapValues(teams, (team) => {
      return {icons: true};
    });
  }
};

More options are documented in the api docs, and a description of exactly how this library works is on the way.

TODOs

1. Add the functionality to persist state across application executions.
2. Formalize and implement unit testing
3. Create working Electron App to serve as a complete example

License

MIT