我有基于电子商务的页面。整个页面不包含在单个react应用程序中。
页面的大部分静态内容是使用EJS在服务器端呈现的。在客户端上渲染后，我们用两个独立的react应用程序各自的状态初始化它们。
- 购物车应用程序。(显示表示购物车中项目计数的计数(
- 产品列表应用-产品列表应用程序呈现产品列表
每个产品项目都有一个添加到购物车按钮。当用户点击它时，我们需要立即更新购物车中的计数，而无需刷新页面。
现在我的问题是，是否有一种方法可以在不渲染整个页面的情况下实现这一点。下面是我的HTML标记。
<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.
高级摘要-要在一个页面上同步多个React应用程序，您需要一个通用的数据源，如REDUX(我个人建议(和subscribe，以同步多个React应用程序中的REDUX Store，并相应地更新组件。
如何实现？(我对我的项目做了什么(
- 创建两个单独的react redux应用程序
- 制作Common存储和捆绑代码并运行
这看起来很简单，但事实并非如此。
我在实施过程中遇到的问题。
如何将React项目与常见的Redux Store和减速器分离。-为此，我使用了Redux动态模块库，该库允许我们对组件的负载进行单独的存储或减载。
我仍在做这件事，但请参考。这是我针对类似问题的git回购。
您可以通过多种方式解决这些问题
其中之一，您添加了一个服务，在那里您为add或Remove card项目编写代码请求，并在此处使用Rxjs Subject和Subscribe from card组件示例。
在您的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...
}
}
也许它能帮助你解决问题
谢谢
您可以使用公共redux存储来维护购物车计数，两个应用程序都将使用该存储