如何在Electron主进程中通过Node.js函数更新Redux状态

1. 核心原因：主进程与渲染进程的Redux实例隔离 #

Electron的主进程和渲染进程是独立的V8上下文，你在主进程main.js中创建的Redux store，和渲染进程里的store是完全不同的实例。主进程调用store.dispatch只会更新主进程内的store，渲染进程的状态自然不会同步变化，这和自定义Hook无关。

2. 正确数据流方案：主进程与渲染进程通信 #

方案一：用Electron IPC传递数据 #

• 主进程监听串口数据，通过ipcMain发送给渲染进程：

  // main.js（主进程）
  const { ipcMain } = require('electron');
  // 假设已初始化串口实例serialPort
  serialPort.on('data', (rawData) => {
    // 处理串口数据，提取需要的value和label
    const value = parseFloat(rawData.toString().trim());
    const label = new Date().toLocaleTimeString();
    // 向渲染进程发送数据
    mainWindow.webContents.send('serial-data', { value, label });
  });
  

• 渲染进程监听ipcRenderer事件，触发Redux动作：

  // 渲染进程的store入口或组件文件
  const { ipcRenderer } = require('electron');
  import store from './store';
  import { addValue, addLabel } from './actions';
  
  ipcRenderer.on('serial-data', (_, { value, label }) => {
    store.dispatch(addValue(value));
    store.dispatch(addLabel(label));
  });
  

方案二：将串口监听移至渲染进程（更简洁） #

如果串口操作不需要主进程权限，直接在渲染进程中处理串口逻辑，跳过IPC通信：

// 渲染进程的工具文件或组件内
const SerialPort = require('serialport');
const port = new SerialPort('/dev/ttyUSB0', { baudRate: 9600 });
import store from './store';
import { addValue, addLabel } from './actions';

port.on('data', (rawData) => {
  const value = parseFloat(rawData.toString().trim());
  const label = new Date().toLocaleTimeString();
  store.dispatch(addValue(value));
  store.dispatch(addLabel(label));
});

3. 验证Redux Reducer的正确性 #

确保你的reducer是纯函数，必须返回新的状态对象，不能直接修改原状态：

// 正确的reducer写法示例
const initialState = {
  values: [],
  labels: []
};

export default function dataReducer(state = initialState, action) {
  switch (action.type) {
    case 'ADD_VALUE':
      // 返回新数组，不修改原数组
      return { ...state, values: [...state.values, action.payload] };
    case 'ADD_LABEL':
      return { ...state, labels: [...state.labels, action.payload] };
    default:
      return state;
  }
}

如果reducer直接修改原状态（比如state.values.push(action.payload)），Redux无法检测到状态变化，组件也不会更新。

4. 组件正确订阅Redux状态 #

确保组件通过useSelector或connect正确订阅状态：

// 函数组件使用useSelector示例
import { useSelector } from 'react-redux';

function ChartComponent() {
  const values = useSelector(state => state.data.values);
  const labels = useSelector(state => state.data.labels);
  // 基于values和labels绘制实时图表
  return <div>{/* 图表渲染逻辑 */}</div>;
}

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