Electron-redux share state between browser windows

Question

I am a relatively new programmer building an application using React, Electron, and now Redux. The app opens two windows when it loads, and these two windows have to share a bit of state. I previously was able to achieve this without Redux using localStorage - when one process would save state it would trigger the other one to update. The problem is, now that my app is growing larger, this process is getting tedious and difficult to abstract. There is also a ton of prop drilling, which is beginning to feel "wrong." I get the feeling that there must be a better way, especially with what Redux can offer.

I originally created my app using create-react-app using this article as a guide.

It seems like using electron-redux would be a great choice, except for the life of me, I can't understand how to make it work for my use case. I tried to mimic the creator's "timesheets" test app, but he is somehow able to use import ES6 module syntax in his main electron process, where doing so in mine breaks the app (it's not recognized by node as a module). Venturing down that troubleshooting path led to more breaks and frustration.

There have been other stack overflow posts, such as this and this, where others have had this exact problem and somehow figured it out. However, they neglected to answer exactly how they figured it out - just that they used electron-redux and made some adjustments - which they didn't bother to write up.

What I have now are two stores, as per the electron-redux guidelines:

mainStore.js

import rootReducer from './redux/reducers';
import { configureStore } from '@reduxjs/toolkit';
import {
    forwardToRenderer,
    triggerAlias,
    replayActionMain,
} from 'electron-redux';

const middlewares = [triggerAlias, forwardToRenderer];
const store = configureStore({
    reducer: rootReducer,
    middleware: [...middlewares],
    devTools: true,
});

replayActionMain(store);

export default store;

rendererStore.js

import rootReducer from './redux/reducers';
import { configureStore } from '@reduxjs/toolkit';
import {
    forwardToMain,
    getInitialStateRenderer,
    replayActionRenderer,
} from 'electron-redux';

export default function configureRendererStore(
    initialState = getInitialStateRenderer()
) {
    const middlewares = [forwardToMain];
    const store = configureStore({
        reducer: rootReducer,
        middleware: [...middlewares],
        devTools: true,
    });

    replayActionRenderer(store);
    return store;
}

I am importing those stores into the root components of the two windows of my app. As I said earlier, if I try to import a store into my electron main process, it errors out because it's not a module. The error I'm currently getting is TypeError: Cannot read property 'on' of undefined at the process called with replayActionMain(store);

Any help would be greatly appreciated!

Electron-redux share state between browser windows

0 Answers0