Electron Redux 状态共享

在Electron中，主进程与渲染线程之间的通信只能通过 ipc 来实现，没有办法在两个线程之间实现Redux状态共享，如果要实现的话，可以通过 electron-redux 这个包。

GitHub - klarna/electron-redux: Use redux in the main and browser processes in electron

它本质上还是通过ipc通信来实现的，底层会在renderer进程启动的时候，从主进程的store中获取数据，保存在renderer进程中。

配合 @reduxjs/toolkit 的使用方式：

需要创建两个 store，一个是主进程的store，一个是renderer进程的store

主进程mainstore:

import { composeWithStateSync } from 'electron-redux/main';
import { configureStore, applyMiddleware } from '@reduxjs/toolkit';
 
import reducer from './reducers';
 
  
 
const store = configureStore({
  reducer,
  enhancers: [composeWithStateSync(applyMiddleware())],
});
 
export default store;

renderer渲染进程store

import { composeWithStateSync } from 'electron-redux/renderer';
import { configureStore, applyMiddleware } from '@reduxjs/toolkit';
 
import reducer from './reducers';
 
const store = configureStore({
  reducer,
  enhancers: [composeWithStateSync(applyMiddleware())],
});
 
export default store;

这两个store的区别在于，中间件不一样，主进程使用 electron-redux/main 下的方法，渲染进程使用 electron-redux/renderer 下的方法。

如果需要使用异步中间件，例如 redux-thunk

import thunk from 'redux-thunk';
 
composeWithStateSync(applyMiddleware(thunk))

在渲染器进程加载之前，需要先加载 Preload 脚本

require('electron-redux/preload');