当另一个组件的 state 发生变化时如何重新加载组件 React

Question

我正在制作一个带有 react 和 firebase 的电子商务应用程序<cart />组件包含两个子组件

1- <BasketItem /> （该组件将复制用户添加到购物车中的尽可能多的项目，并且它具有让用户修改项目数量的功能）

2- <OrderSummary /> （这个组件将向用户显示他的购物车的总价格和运费）

当然，项目的所有数据和总数将从数据库中获取（我正在使用 firestore），但问题是当用户从<BasketItem />组件更新项目的数量时，从<OrderSummary />也没有得到更新，因为数据库调用已经完成并且无法调用从数据库获取数据的 function，因为两个组件之间没有父子关系并且我无法传递props在他们之间，我尝试为此使用 react-context-api 但这并没有解决问题，因为数据库上是最新的，更新总值的唯一方法是刷新页面，这不是一个好的用户体验。

Answer 1

在任何 React all 中，当您更新 state 中的购物车信息时，所有受影响的 UI 组件都应该更新（因为他们都应该注意这一点）。

使用 Firestore 时，您将使用所谓的 CQRS 模式，其中发送到数据库的更新是从侦听器到数据库的单独 stream。 您通常会在创建/安装组件时添加侦听器，以便在组件对用户可见时它们始终在侦听。

有了该设置，更新流程变为：

1. 您的代码通过 Firebase SDK 将新值写入数据库。
2. 这会在某个时候写入服务器上的数据库。
3. 服务器将此信息发送给所有其他客户端，并向写入该值的客户端确认。
4. 这会触发您之前注册的侦听器。
5. 监听器更新应用程序的 state 中的数据。
6. 然后最终触发受影响组件的重绘。

这是一般流程，但它适用于我能想到的所有情况。

Answer 2

通常最好的做法是将 state 也以 context-api 或 redux-store 的形式存储在前端，或者简单地作为组件的 state，他们尝试在用户触发时将此 Z9ED39E2EA931586B73/前端-submitEZEF 与 DB 同步命令动作。

如果您必须在每次数量变化时更新您的数据库，那么您也必须在前端状态/redux-store 上更新相同的数据库。