我有基于电子商务的页面。整个页面并未包含在单个 React 应用程序中。
页面的大部分静态内容是使用 EJS 在服务器端呈现的。在客户端上渲染后，我们用自己的状态初始化两个独立的 React 应用程序。
- 购物车应用程序。 (显示代表购物车中商品数量的计数)
- 产品列表应用 - 产品列表应用呈现产品列表。
每个产品都有一个添加到购物车按钮。当用户点击它时，我们需要立即更新购物车中的计数，而无需刷新页面。
现在我的问题是是否有一种方法可以实现这一目标，而无需在 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(我个人推荐)并订阅 REDUX Store > 在多个 React 应用程序中并相应地更新组件。
如何实现？ (我对我的项目做了什么)
- 创建 2 个独立的 React-Redux 应用程序。
- 制作 Common store 和捆绑代码并运行。
这看起来很简单，但事实并非如此。
我在实现过程中遇到的问题。
如何将 React 项目与常见的 Redux Store 和 reducers 分开。 - 为此，我使用了 Redux-Dynamic-Modules库，它允许我们在组件的负载上创建单独的存储或负载 reducer 。
我仍在努力，但供您引用。 Here is my git repo对于类似的问题。
关于javascript - 单个页面中的多个 React 应用程序并使它们保持同步，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58927713/