javascript - 单个页面中的多个 React 应用程序并使它们保持同步

Question

我有基于电子商务的页面。整个页面并未包含在单个 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.

Answer 1

高级摘要 -要在单个页面上同步多个 React 应用程序，您需要一个通用数据源，例如 REDUX(我个人推荐)并订阅 REDUX Store > 在多个 React 应用程序中并相应地更新组件。

如何实现？ (我对我的项目做了什么)

1. 创建 2 个独立的 React-Redux 应用程序。
2. 制作 Common store 和捆绑代码并运行。

这看起来很简单，但事实并非如此。

我在实现过程中遇到的问题。

如何将 React 项目与常见的 Redux Store 和 reducers 分开。- 为此，我使用了 Redux-Dynamic-Modules库，它允许我们在组件的负载上创建单独的存储或负载 reducer 。

我仍在努力，但供您引用。 Here is my git repo对于类似的问题。