Multiple react apps in a single page and keep them in sync

Question

I have e-commerce based page. The entire page is not wrapped within a single react app.

The bulk of the page's static content is rendered on the server-side using EJS. Upon rendering on the client we initialize two isolated react apps with their own states.

• Cart App. (Shows a count representing items count in the cart)
• Product list app - The product list app renders a list of products.

Each product item has an Add to Cart button. When the user clicks on it we need to immediately update the count in the cart without refreshing the page.

Now the question I have is if there is a way to achieve this without rendering the entire page in react. Below is the rough HTML markup I have.

<navbar>
    <navbar-links/>
    <div id="site-cart-app"></div> // this is where the cart react app is initialized.
</navbar>
<div id="product-list-app"></div> // this is where the product list app is initialized.

Answer 1

you can use common redux store to maintain the cart count, both Apps will use that store

Answer 2

High-level summary - To make sync multiple React app on a single page you need a common data source, like REDUX (I personally recommend) and subscribe to the REDUX Store in multiple React app and update component accordingly.

How to achieve? (What I did with my project)

1. Create 2 separate react-redux applications.
2. Make Common store and bundle code and run.

This seems simple but ain't.

The problem which I faced during implementation.

How to separate React projects with common Redux Store and reducers. - For this, I used Redux-Dynamic-Modules library which allows us to make a separate store or load reducers on a load of a component.

I'm still working on it but for your ref. Here is my git repo for a similar problem.

Answer 3

You can solve these multiple ways,

One of them, you add a service where you write the code request for Add or Remove card item and use Rxjs Subject and Subscribe from card component example here.

In your Services.js

import { Observable, Subject } from "rxjs";
export class CardService {
   public static observable = new Subject();
}

In your productpage

import { CardService  } from ./services/CardService";

//trigger when click to add or remove Card item 
TollAdminService.observable.next({ cardItem, action });

And in your card component

import { CardService  } from ./services/CardService";

// inside the component constructor like this
constructor(props) {
    TollAdminService.observable.subscribe((cardItem: any, action: any) => {
      //add your action code here...
    }
}

May be it helps you to solve your problem

Thanks