Резюме высокого уровня. Чтобы синхронизировать несколько приложений React на одной странице, вам нужен общий источник данных, например REDUX (я лично рекомендую) и subscribe с REDUX Store в нескольких приложениях React, и соответствующим образом обновите компонент.

Как добиться? (Что я сделал со своим проектом)

1. Создайте 2 отдельных приложения react-redux.
2. Сделайте общий магазин и код пакета и запустите.

Это кажется простым, но это не так.

Проблема, с которой я столкнулся во время внедрения.

Как разделить проекты React с помощью общего Redux Store и редюсеров. - Для этого я использовал библиотеку Redux-Dynamic-Modules, которая позволяет сделать отдельный хранить или загружать редукторы при загрузке компонента.

Я все еще работаю над этим, но для вашего реф. Вот мой репозиторий git для аналогичной проблемы.

Вы можете решить эти несколько способов,

В одном из них вы добавляете службу, в которой вы пишете запрос кода для добавления или удаления элемента карты и используете пример темы Rxjs и подписки из компонента карты здесь.

В ваших Services.js

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

На странице продукта

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

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

И в компоненте карты

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...
    }
}

Может быть, это поможет вам решить вашу проблему

Спасибо

вы можете использовать общий магазин избыточности для поддержания количества корзин, оба приложения будут использовать этот магазин