redux-electron-ipc

Redux Electron IPC Middleware

A Redux middleware to reduce code around ipc calls in an Electron application. You can send and receive IPC events with a simple api.

Install

npm

npm install --save redux-electron-ipc

Usage

Check out the full demo application.

Window

import { applyMiddleware, createStore } from 'redux';
import createIpc, { send } from 'redux-electron-ipc';
import { pongActionCreator } from './actions';
import { exampleReducer } from './reducer';

// register an action creator to an ipc channel (key/channel, value/action creator)
const ipc = createIpc({
  'pong': pongActionCreator, // receive a message
  ...
});

const store = createStore(exampleReducer, applyMiddleware(ipc));

// send a message with arguments through the `send` utility function
store.dispatch(send('ping', 'redux', 'electron', 'ipc'));

Main

// your regular ipc setup
const electron = require('electron');
const { ipcMain } = electron;

...

// pong event with arguments back to caller
ipcMain.on('ping', (event, ...args) => {
  console.log('Ping', ...args);
  event.sender.send('pong', ...args);
});

API

redux-electron-ipc has a default constructor function for creating ipc middleware, and a named send utility function.

createIpc(events?: Object) => IpcMiddleware
send(channel: string, ...arg1?: Object, arg2?: Object, ..., argN?:Object) => Action

Events

Each key on the events object (default: {}) registers a single ipc channel response. The key designates the ipc channel; the value is a redux action creator to be dispatched.

{
  'ipc channel name': (event, ...args) => {
    return {
      type: 'YOUR_ACTION_TYPE',
      ... optional mapping of arguments ...
    }
  }
}

Examples

Sending an IPC event

Use the utility function send to issue an ipc message to the main thread. The method signature is the same as ipcRenderer's send.

Behind the scenes, the ipc middleware will trigger the ipc on the given channel with any number of arguments.

import { send } from 'redux-electron-ipc';

store.dispatch(send('ipc event channel', ...args));

Receiving an IPC event

To receive events, register a channel response when configuring the middleware.

const ipc = createIpc({
  'channel to listen to': () => {
    return {
      type: 'IPC_RESPONSE_ACTION',
      ... optional mapping of arguments ...
    }
  }
  ...
});

const store = createStore(exampleReducer, applyMiddleware(ipc));

What about redux-thunk?

redux-electron-ipc supports thunks out of the box as long as you install redux-thunk and apply the thunk middleware before the ipc middleware.

Example

const ipc = createIpc({
  'ipc channel name': () => dispatch =>
    dispatch({ type: 'DELAYED_ACTION_TYPE' })
});
const store = createStore(exampleReducer, applyMiddleware(thunk, ipc));

Questions

For any questions, please open an issue. Pull requests (with tests) are appreciated.