0

我有基于电子商务的页面。整个页面不包含在单个反应应用程序中。

页面的大部分静态内容是使用 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.
4

3 回答 3

2

高级摘要 - 要在单个页面上同步多个 React 应用程序，您需要一个公共数据源，例如REDUX（我个人推荐）以及subscribe多个REDUX StoreReact 应用程序和相应的更新组件。

如何实现？（我对我的项目做了什么）

  1. 创建 2 个独立的 react-redux 应用程序。
  2. 制作通用存储和捆绑代码并运行。

这看起来很简单，其实不然。

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

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

我仍在努力，但为了您的参考。这是我针对类似问题的git repo 。

于 2019-11-19T06:33:46.787 回答
2

您可以通过多种方式解决这些问题，

其中之一，您添加一个服务，您可以在其中编写添加或删除卡片项目的代码请求，并在此处使用卡片组件示例中的 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...
    }
}

可能会帮助您解决问题

谢谢

于 2019-11-19T06:44:10.350 回答
1

您可以使用 common redux store 来维护购物车数量，两个应用程序都将使用该 store

于 2019-11-19T06:24:50.933 回答