How to share state (react)between electron's multiple windows?

Question

I am developing a desktop app with react for UI and electron.

So, for now, I am fetching data from the server and saving it in the state using React's Context API to update the UI.

I am keeping the state and the function to add, remove and update state in the renderer process and with IPC I am sharing the data between renderer process through main process (as it should be).

But as the application is scaling I need a better approach. Something like a central state (if that's a thing).

P.S. can I use a database along with the Electron app if there is any real-time database such as rxdb?

Answer 1

I had this exact same problem and I used electron-redux (https://github.com/hardchor/electron-redux). I was also using react for my UI.

Answer 2

I ran into the same situation where I needed a single redux store for all my react renderer process in electron.

I tried electron-redux but that did not work for me as react complains about the snippet of code you need to put in the renderer process.

---

nice solution:

After some search I ran into redux-state-sync which is a redux middleware that used to synchronize the redux store and actions across multiple react tabs, which works nicely with electron as the tabs here are the different renderer process.

The only hindrance is to initialize the store in the newly created window, that can be done by sending the store state with an ipc call from the main window that opens the new one, that dispatches an action to update the state.

This initialization approach works nicely in [email protected] , but for some reason it doesn't in react [email protected]

Answer 3

The best way to have a 'master state' is to use React-Redux.

Redux can do what Context does and more. It also has lots of libraries for listening for realtime updates from servers. The most popular at the time is React-Redux-Firebase, which connects your Redux store with your Firebase database.

Most developers agree on the fact that Redux takes some time to set up, but is definitely worth the time invested. I have personally used React-Redux-Firebase and I can assure you that all real-time updates will be in your Redux store within 250ms.

Firebase is also free up to a certain point (check Firebase Pricing).

In order to access your Redux state in a component, your need to follow 3 steps:

STEP 1: Create a mapStateToProps const that contains all the stuff you want from your store.

const mapStateToProps = state => ({
    customers: state.customers,
    books: state.books
})

STEP2: Create an actions const that contains any functions you have in an actions.js or similar file and you want to call

import { fetchCustomers } from './actions.js'

const actions = {
    fetchCustomers
}

Remember that any fetching from your API can (and should) be done from there.

STEP 3: Export your component with Redux's connect function, including your mapStateToProps and actions consts.

export default connect(mapStateToProps, actions)(myComponent);

Redux is rather complicated to be explained in a single stackoverflow answer, so I suggest you take a look at the docs or follow a tutorial. You should be able to figure everything out in your first or second day of development. It is absolutely worth the time.