使用React进行API调用以获取数据并呈现数据

Question

我是React的新手，想了解与经典MVC的区别。 我想创建一个简单的组件，该组件最初会加载一些数据并渲染一个网格。 在某些状态或道具更改时，它将重新加载数据并重新呈现。

从以下两个选项做出反应的最佳方法是什么？

1. 使用生命周期事件加载数据，更新某些状态并渲染，而在另一个事件中将显示某些加载不透明性。

2. 使用redux和react-redux吗？但在所有示例中我都看不到API调用。 这是中间件（Thunk？）的角色吗？

将提供适当的解释。

Answer 1

这两种方法都是正确的。这取决于您的用例。如果您可以避免在应用程序中使用redux，请使用生命周期方法进行API调用（在react文档中也称为订阅）。如果您认为您的应用程序包含许多组件，并且不同的组件需要共享一个状态，请使用redux。

您还应该查看React钩子https://reactjs.org/docs/hooks-reference.html 您可以使用效果钩子https://reactjs.org/docs/hooks-effect.html进行API调用并更新组件的状态。

更新：

Thunk和Sage都用于管理应用程序中的副作用（从此处进行API调用）。我用过传奇，我对重击并不了解。

如何使用redux-saga： 假设您要获取一些数据以在单击按钮时显示，这就是它的工作方式：

• 单击按钮后，您将调度一个动作，例如GET_DATA
• 您的redux减速器将更改此特定操作的某些状态，例如isLoading = true
• 您可以在组件中使用isLoading来显示微调器/叠加层
• 同时，saga将侦听GET_DATA动作并进行API调用
• 如果成功，则从Saga调度一个操作，并使用API​​调用中的数据说GET_DATA_SUCCESS
  • Reducer将更改isLoading = false并将数据设置为状态，例如apiData = {...}
• 如果失败，则从佐贺县开始执行操作，并说出GET_DATA_FAILED以及错误代码/消息
  • Reducer将更改isLoading = false并将错误设置为状态，例如apiError = {...}
• 您现在可以在组件中使用isLoading = false删除微调器，并在组件中显示数据（apiData）或错误（apiError）。

您可以阅读本教程以了解更多https://redux-saga.js.org/docs/introduction/BeginnerTutorial.html