ReactJS - 列表、詳細信息、新建、編輯頁面 - 何時使用 Redux 從 API 加載數據？

Question

我的應用程序中有多個功能 collections，它們每個都有一個列表頁面，其中包括一個列出所有它們的表，一個單擊表條目之一的詳細信息頁面，一個編輯頁面和一個用於創建新頁面的頁面。

collections 的 state 由 Redux 管理並從后端獲取。 在這種情況下，從后端獲取數據的常見模式是什么？

• 它是否應該僅由列表頁面 à la fetchAllObjects獲取，然后在移動到新頁面時傳遞（如 props.history.push + state）並通過向后移動再次傳遞（例如，在編輯、保存和返回詳細信息頁面時）以便顯示更新的數據）
• 還是每個子頁面都應該再次獲取數據以獲得最新版本？ 意思是獲取列表頁面中的所有對象，但也要在詳細信息和編輯頁面中執行fetchOneObject ，因此我不需要傳遞 state 和歷史記錄。

Answer 1

您可以使用 redux 完成這兩件事。 但是考慮一下哪種情況會更優化。 想想你必須對后端進行的調用次數。

在第一種情況下，您可以在 componentDidMount 時進行一次調用，然后當您在頁面中移動時，您可以簡單地使用該數據。 即使您進行了任何更新，您也可以在 redux 商店上進行更新。 這樣您就可以保持本地 redux 存儲和后端存儲同步，無需任何進一步的調用。

但是考慮第二種情況，如果你每次都調用后端，那么使用 redux 是沒有用的。

最后一個建議，使用 redux 時不要傳遞道具，您只需將該組件連接到 redux 即可。 道具傳遞很容易，但當你有大量道具時，它會變得更加忙碌。

Answer 2

我建議在列表頁面上執行fetchAllObjects ，然后將詳細信息頁面上的特定詳細信息作為參數傳遞或 state 如果您使用的是 react-router-dom 或作為道具，那么您沒有陳舊的數據。

流程是：

1. 獲取數據列表 - 組件安裝后，確保看到新數據

2. 獲取特定詳細信息並傳遞到編輯/更新頁面

3. 請求更新到 api。

每當安裝列表頁面組件時，它都會請求數據列表。 或者您可以使用 redux-saga 來監聽更新操作並獲取您的數據列表並更新存儲。