Angular Electron应用中基于NgRx的跨窗口Redux状态持久化问询

Absolutely, this is totally feasible in Angular + Electron with NgRx! You won’t find a direct off-the-shelf library like redux-electron-store for React, but building a custom solution is straightforward once you break down the core pieces: leveraging Electron’s IPC (Inter-Process Communication) and NgRx’s flexible state management APIs.

Step 1: Capture and Send Current State from the Original Window #

First, when you’re ready to spawn a new BrowserWindow, grab the current NgRx state from your existing Angular app and send it to the Electron main process via IPC.

In your Angular component/service (renderer process):

import { Store } from '@ngrx/store';
import { ipcRenderer } from 'electron';

// Inject the NgRx Store
constructor(private store: Store) {}

openNewWindow() {
  // Get a snapshot of the current full state
  const currentState = this.store.selectSnapshot(state => state);
  
  // Serialize the state (ensure it's JSON-safe first!)
  const serializedState = JSON.stringify(currentState);
  
  // Send to main process to trigger window creation
  ipcRenderer.send('launch-new-window', serializedState);
}

Note: Make sure your NgRx state is fully serializable—avoid functions, Symbols, or circular references. If you have non-serializable data, add a custom serializer to handle it before sending.

Step 2: Main Process Creates Window and Passes Initial State #

In your Electron main process, listen for the IPC event, create the new BrowserWindow, and send the initial state to the new renderer process once it’s ready.

const { app, BrowserWindow, ipcMain } = require('electron');
const path = require('path');

ipcMain.on('launch-new-window', (event, serializedState) => {
  const newWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      enableRemoteModule: false
    }
  });

  // Load your Angular app as usual
  newWindow.loadURL('http://localhost:4200');

  // Wait for the window to finish loading, then send the initial state
  newWindow.webContents.on('did-finish-load', () => {
    newWindow.webContents.send('set-initial-state', serializedState);
  });
});

Step 3: Initialize NgRx State in the New Window #

In the new Angular window, listen for the initial state from the main process and use it to bootstrap your NgRx store.

First, set up a listener in your preload script (to safely expose IPC to Angular):

const { ipcRenderer, contextBridge } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  receiveInitialState: (callback) => {
    ipcRenderer.on('set-initial-state', (event, state) => callback(state));
  }
});

Then, in your Angular app’s main module or a startup service, load the initial state and initialize the store:

import { NgModule } from '@angular/core';
import { StoreModule, INITIAL_STATE } from '@ngrx/store';
import { yourRootReducers } from './reducers';

// Create a factory to provide the initial state from Electron
export function getInitialState() {
  return new Promise(resolve => {
    // Access the exposed Electron API
    window.electronAPI.receiveInitialState((serializedState) => {
      const parsedState = JSON.parse(serializedState);
      resolve(parsedState);
    });
  });
}

@NgModule({
  imports: [
    StoreModule.forRoot(yourRootReducers)
  ],
  providers: [
    {
      provide: INITIAL_STATE,
      useFactory: getInitialState,
      deps: []
    }
  ]
})
export class AppModule {}

Step 4: Optional - Sync State Across Windows in Real-Time #

If you want ongoing state sync between windows (not just initial persistence), extend the solution to broadcast actions between processes:

• In the original window, subscribe to NgRx actions and send them to the main process after dispatch.
• The main process broadcasts these actions to all other open BrowserWindows.
• Each window receives the action and dispatches it locally to keep their stores in sync.

Example Action Sync in Renderer Process: #

import { Actions, ofType } from '@ngrx/effects';
import { ipcRenderer } from 'electron';
import { Store } from '@ngrx/store';

// In an NgRx Effect or service
constructor(private actions$: Actions, private store: Store) {
  this.actions$.pipe(
    // Filter actions you want to sync (or use '*' for all)
    ofType('*')
  ).subscribe(action => {
    ipcRenderer.send('sync-action', JSON.stringify(action));
  });

  // Listen for incoming synced actions from main process
  ipcRenderer.on('apply-synced-action', (event, serializedAction) => {
    const action = JSON.parse(serializedAction);
    this.store.dispatch(action);
  });
}

Example Action Broadcast in Main Process: #

ipcMain.on('sync-action', (event, serializedAction) => {
  // Send the action to all windows except the sender
  BrowserWindow.getAllWindows().forEach(window => {
    if (window.webContents !== event.sender) {
      window.webContents.send('apply-synced-action', serializedAction);
    }
  });
});

Key Considerations #

• Serialization Safety: Always validate and sanitize state/actions when passing between processes to avoid parsing errors.
• Performance: If your state is large, consider sending only relevant slices instead of the full state to reduce overhead.
• Edge Cases: Handle window closures, failed IPC messages, and race conditions (e.g., ensuring the initial state loads before the app renders).

内容的提问来源于stack exchange，提问作者Matt