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

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


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.


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.