React - 在 API 调用的主要路由中使用 Loader 是最佳实践吗答案

【问题标题】：React - Is it a best practice to use Loader in the main Routes for the API callReact - 在 API 调用的主要路由中使用 Loader 是最佳实践吗
【发布时间】：2023-01-05 04:07:32
【问题描述】：

目的：在项目级别的 Web 应用程序负载上获取 API。因为，应用依赖于这个api调用。所以，如果有一个地方我可以在项目级别调用 api。也请建议该解决方案。

示例代码：

import "./styles.css";
import { Routes, Route } from "react-router-dom";
import { useEffect } from "react";

export default function App() {

  useEffect(() => {
    APICall();
  },[])

  if (isLoading) { // Getting the loader state from 
    //API call
    return <Spinner />;
  }

  return <Routes>
    <Route element={<HomePage />} path="/">
  </Routes>;
}

怀疑：这是在主路由上调用 API 并使微调器加载到 API 的最佳实践吗被获取，否则这会导致任何副作用。如果可能，请针对此问题提出替代解决方案。

【问题讨论】：

不，这不是最好的方法，您可以在所有不同的组件上调用 API 并在路由页面中设置集中加载程序。
最佳实践是主观的——这完全取决于您的应用程序功能、应用程序的复杂性和应用程序架构。如果我是你，如果应用程序足够“简单”，我会像你在这里那样做。但如果它是一个复杂的应用程序，我会像 Meet Majevadiya 所说的那样（设置一个集中加载器，同时我在每个组件中调度 API 调用）。
@Nicholas/@Meet Majevadia - 那么我可以使用高阶组件来实现这一点而不复制代码吗？
当然有可能。例如，您可以创建类似 WithAPICall({ url, onSuccess, onFailure }) 的高阶组件。

标签： reactjs api react-hooks

【解决方案1】：

有很多解决方案。但主要取决于您的项目复杂性。对于非常简单的项目，它并不理想，但可以按照您的方式制作。但我强烈建议让真正需要这些数据的组件承担获取责任——所以你应该考虑破坏你的组件

一个值得一看的功能是来自 react-router 的 "loader" 功能，这是您可以使用的一个很棒的功能。使用此功能，您可以确保为每条路线提供正确的提取数据。
您可以使用 react-query 库，因为它在性能级别上是 useEffect 的更好替代品。使用"react-query"，您可以在渲染开始后立即获取数据，因此您不必等到反应加载整个组件
对于具有许多 API 调用的非常复杂的项目，您可以使用 "redux-sagas"
创建封装此 API 调用的包装器组件。例如，您的应用程序中有两种类型的页面 - 受保护和未受保护的路由。您可以创建一个组件，该组件接收另一个组件作为 prop 并称为：ProtectedRoutes，它有条件地返回 2 个组件 - UnProtectedPage 和 Component。

【讨论】：