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 来监听更新操作并获取您的数据列表并更新存储。