State Management Across Processes

State Management Across Processes

Because the UI lives in a separate renderer, you need a strategy to keep data in sync.

Option 1: Central store in the Main process

• Store app‑wide state in a plain JavaScript object.
• Expose getState / setState via the preload bridge.
• Emit change events to renderers when the state updates.

// preload/bridge.js
contextBridge.exposeInMainWorld('store', {
  get: () => ipcRenderer.invoke('store:get'),
  set: (key, value) => ipcRenderer.send('store:set', key, value),
  onChange: (cb) => ipcRenderer.on('store:changed', (e, newState) => cb(newState))
});

Option 2: Use a lightweight library (e.g., Redux, MobX) inside the renderer only, and persist to disk via IPC when needed.

Option 3: electron-store – a ready‑made persistent store that lives in the main process and offers a simple API.

const Store = require('electron-store');
const store = new Store();
store.set('user.name', 'Bob');
console.log(store.get('user.name'));