反应 |使用远程数据建议（对话）

Question

我参加了 Udacity 的 react 和 react native 项目，它教会了我很多东西。

现在我已经掌握了相关技能，并且对环境和 redux 等有了很好的了解。我正在尝试构建我的第一个测试应用程序来处理远程数据。

在 React 教程中，我们将使用本地模拟数据，并尝试获取它，甚至使用 setTimeout 调用模拟延迟。但问题是这些教程仅适用于他们正在构建的应用程序类型。一会儿我会讲到这个……

我的应用说明：

目前我正在制作一个测试应用程序，到目前为止我可以：检索一组食物（远程数据），渲染数据，然后在任何人上按“LIKE”。按下 Like 后，该食物项目 URL 将保存到 authedUser 帐户下“收藏夹”属性下的另一个远程文件中。 目前的食物数据位于 github 存储库中托管的 json 文件中。 用户帐户数据也是如此。

我在 react 课程中注意到的是，数据会被接收到 redux 存储中。 每当您从那里分派一个涉及“收藏”之类的数据更改的操作时，该应用程序都会首先向服务器分派一个操作。一旦解决了，它将分派到 redux 存储并在那里影响它。 现在据我了解......这是一种保持数据同步的方法？这是其他应用程序的做法吗？还是当数据更改时，您只需将更改分派到服务器，并在操作解决后将新数据请求/获取到 redux？教程将接收初始数据，就像这样，它会被固定下来，然后依靠调度来保持同步。简单地使用本地状态，获取我们想要的数据会更好吗？ vs 使用商店？

我不确定什么是最好的，但在我看来，将整个数据文件接收到应用程序中的想法似乎不可扩展？例如，当您使用 instagram 时，您的手机不会下载整个 instagram 数据库。我认为它只下载您的个人资料？和网址给你的朋友？等等？

所以对于我正在尝试制作的这个测试应用程序（上面用斜体字描述 ^） 我不知道该怎么做。我绝对不认为接收整个数据文件是合适的。我知道我希望用户在屏幕上接收食物，但一次只能接收少量，也许通过搜索它会修改屏幕上的结果。然后用户可以喜欢食物。

这是我第一次开发此类应用程序，我确实认为我遗漏了一些东西。

Answer 1

一开始最好不要集成 Redux。只需在普通 React 中构建应用程序。

现在谈谈您的应用。正如你所说，下载整个数据库是个坏主意。当您必须获取大量数据时，一种常见的模式是使用分页。它的工作原理是这样的：您的应用程序要求 10 种食物。服务器返回这 10 个并告诉您还有更多数据，如果您想获取更多数据，您应该发出另一个请求。如果用户一次只能看到 10 个产品，那么获取 1000 个产品是没有意义的，对吧？

假设您喜欢某种食物。按“like”后，更新应用程序状态是不够的，您还需要在服务器上进行更改。你是怎么做到的？通常你有一个食物 ID（比如 123），你可能会向https://server.com/like/123 发帖。现在该请求可能由于各种原因而失败，并且服务器不会注册您的喜欢。这是您仅在数据库中成功更新后才更新本地状态的方式。此外，您可能需要更新点赞数（可能其他用户在您获取该食物后点赞了该食物），因此服务器将返回更新后的点赞数。

Redux 适合这里吗？在 React 中，每个组件都有自己的状态。他们可以使用道具在他们之间共享数据。但这无法扩展，您通常会遇到一种称为 Prop Drilling 的情况。 Redux 存储是某种全局状态。例如：

<FoodItems>
  <FoodItem key=1/>
  <FoodItem key=2/>
</FoodItems>

假设您更新了第一个 FoodItem 的描述。你如何告诉其他组件？在 Redux 中，您调度一个操作并修改存储。现在其他组件可以连接到 store 并从那里获取值。