React/Redux - 你啥时候应该从 API 获取新数据来更新你的商店？

Posted 2023-02-22

【中文标题】React/Redux - 你啥时候应该从 API 获取新数据来更新你的商店？

【英文标题】：React/Redux - When should you fetch new data from an API to update your store?React/Redux - 你什么时候应该从 API 获取新数据来更新你的商店？

【发布时间】：2018-12-28 12:04:37

【问题描述】：

我正在尝试了解使用 API 中的数据更新/刷新 Redux 状态时的最佳做法。

想想这个场景：

您有一个待办事项应用程序，其中许多用户可能会在任何给定时间点更新与您相同的待办事项。显然，您希望您的本地 Redux 存储最终反映其他用户的这些更改。

你愿意：

获取路线更改时更新的待办事项集？ 当/如果用户更改待办事项或与之交互时，获取该待办事项的更新版本？ 两者都有？ 从不 - 一旦获取状态，您就将状态保存在存储中，它会成为该会话的真实来源（显然不理想） 还有别的吗？

我现在对向客户端推送更改或轮询 API 不感兴趣（啊！）。我只是想就大多数开发人员何时刷新存储在 Redux 状态中的 API 派生数据达成某种共识。

【问题讨论】：

试一试：如果您没有更改路线或与应用程序交互，那么应用程序商店应该更新。根据我的理想时间是应用程序的开始。当您的第一个组件要渲染时。在获取时，我们不应该取消订阅，就像在 firebase 的情况下一样，只要数据发生一些变化，它就应该更新存储。

甚至不是一开始。无论您在哪里获取数据，都不要取消订阅

但是如果我没有向客户端推送数据（根据问题），那么就没有机会订阅/取消订阅。我只是调用 fetch() 来获取数据。我在应用程序首次加载时执行此操作（对于某些应用程序范围的特定数据，例如帐户详细信息/用户/等），然后当用户单击“to dos”路由时获取“to dos”。目前，当用户返回“to dos”路线时，我会重新获取数据。

订阅与获取数据不推送有关。当您在当前组件上时，您可以使用订阅以连续方式获取数据，当您离开组件时，您取消订阅它。但是当您重新访问该页面时，您必须再次获取数据以便获得更新。所以我认为重新获取不是额外的工作。

您只需要在用户转到“to dos”路线时添加订阅

【参考方案1】：

这是我从你的问题中得到的

应用中的相同空间由多个用户更新。 应用上的任何用户都必须让其他用户完成更改。 您想知道何时获取数据或刷新商店。

我现在对将更改推送给客户不感兴趣，也不 轮询 API（啊！）。

我不明白这是为了什么。您可能不会更新应用程序，但要查看您的应用程序应该由一个或另一个更新的更改。

除此之外，我还告诉您订阅获取数据的任何位置。我不知道您对订阅的理解是什么，据我所知，订阅是继续定期获取以获取更新。订阅本质上是异步的。

我给出一个实现订阅的简单例子。

console.log("Started");
let subscription = false;
const getData = () => 
  // call your database and fetch the data and once
  // fetching done call the getData again

 // Think setTimeout as database call.
 // upon resolving the data I called it again
 // It neither stops other call back from running run
  setTimeout(() => 
    console.log("Fetching");
    if(subscription) 
      console.log("shuting");
      return;
    
    getData();
  , 1000);


getData();

setTimeout(() => 
  console.log("hello");
, 5000);

setTimeout(() => 
  subscription = true;
, 8000);

【参考方案2】：

如果您不想推送或轮询，请在用户请求时获取数据。从不获取可能非常适合边缘案例应用程序，但绝对不是常见用例。

【讨论】：

你和我在同一页上，我完全同意。您将什么归类为“当用户请求时”？例如，您会添加一个“刷新到 dos”按钮，或者当用户更改回显示所有待办事项的路线时重新获取数据？ ...或者两者兼而有之？

是的，主要用于路线更改，如果需要，您可以添加额外的刷新按钮。