當另一個組件的 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 上更新相同的數據庫。