Skip to content

dispatch ngrx actions between different electron widows

Notifications You must be signed in to change notification settings

meniRoy/electron-ngrx

Repository files navigation

ElectronNgrx

Build Status codecov semantic-release npm

Motivation

Synchronizing multiple Electron windows to a single state or in some cases multiple states is a difficult task which results in complex management and repetitive code.

Implementing such a communication solution for multiple windows that transfer a decent amount of data between them takes a lot of effort, especially if you have multiple states that are shared. Basically you will find yourself building a rest API.

The solution

ElectronNgrx offers an easy to use solution. It seamlessly dispatches actions and selects data from states across multiple windows.

##Usge: ElectronNgrx delivers an Angular service with the following methods:

dispatchToParent - Dispatch NGRX action to the window parent.

dispatchToId - Dispatch NGRX action to a specific Electron window that matches the given id.

dispatchToRoute - Dispatch NGRX action to all windows on the specific route.

selectFromId - select data from the state of the window that matches the given id.

selectFromParent - select data from parent window state.

change detection

By default NgZone isn't aware of the ipc electron. This may cause issues when messages from electron ipc are received and the change detection isn't triggered. ElectronNgrx takes care of this problem by triggering the Angular change detection after every action that affects the window such as dispatching an action received from another window or receiving data from another window's state.

example

Dispatch increment action to the parent window's state.

export class ChildWindowComponent {
 
  constructor(private electronNgrxService: ElectronNgrxService) {
  }

  increaseCounterOnParentWindow(increaseBy) {
    this.electronNgrxService.dispatchToParent(incrementAction({paylaod: increaseBy}));
  }
}

ElectronNgrx will dispatch the action to the parent window's state, assuring that the Angular change detection will be triggered on the parent window.

Demo

To clone and run the demo you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

# Clone this repository
git clone https://github.com/meniRoy/electron-ngrx.git
# Go into the repository
cd electron-ngrx
# Install dependencies
npm install
# Run the the demo
npm start