Search code examples
reactjstypescriptelectronbackground-process

How to handle persistent data, functions and tasks in a Electron-powered React application even after routing across multiple components?


I am rather new to React and hence I am running into several roadblocks when trying to figure out how to implement something in React. Lately I am writing an application that only consists of a grid view and details view and in order to navigate I have been using props and functions to manipulate the state of the root component in the children, however it got messy once I restructured my code and hierarchies got deeper than one level. Luckily I was able to implement a MemoryRouter from react-router-dom and it works as expected. Unfortunately I am now having an issue I don't know how to properly design with React.

Assume that my landing page of the application that is accessible under / has the aforementioned grid with various elements. Once you click on an item you successfully get redirected to /details/:id. I was able to parse the id parameter that is available via withRouter in my DetailsPage component. Assume that the user is able to initiate a long background process (actually a download) by pressing a button on that particular details page. Most likely there won't be any issues running this asynchronously and letting the download process occasionally report the progress to update a progress indicator on the current page.

What if the user goes back to the landing page, opens the details page of another item, issues a download there and returns to the first details page? Basically what I'd like to know is how may I write my code such that those downloads are running in the background while having access to the data even after navigating around. Especially when returning to the first download, I'd like to have the progress indicator being automatically updated to the state/data that is available in the background.


Solution

  • I solved this by creating a second BrowserWindow but keeping it invisible to have it run as a background worker/agent for tasks and downloads. In order to circumvent writing custom IPC to fetch states I have integrated Redux. Combined with electron-redux I was able to create one store in the main process and have one store in each renderer process, that is in sync with the others. This allows me to issue actions in the background worker without the need to IPC it to the main window.