如何在同一组件中使用来自 redux-toolkit 的多个查询挂钩？

Question

因此，在 redux 工具包中，您可以创建使用多个端点调用 RestApi 的挂钩，我使用 3 个端点，使用 redux-toolkit 它创建了 3 个挂钩，我可以在我的 React 应用程序中的任何地方使用，我的问题是如何让它在一个组件中工作？

import React from "react";
import { useSelector } from "react-redux";
import { useGetCountryQuery, useGetRegionQuery, useGetAllQuery } from "../../services/CountryAPI";
import CountryCard from "./CountryCard";
import { Link } from "react-router-dom";

const CountryList = () => {
  const { option } = useSelector((state) => state.option);
  const { data = [], isFetching } = useGetAllQuery();
  const { data = [], isFetching } = useGetCountryQuery();
  const { data = [], isFetching } = useGetRegionQuery(option);

  return (
      <>
          {data.map((country) => (
            <Link onClick={() => {}} key={country.name.official} to={`/details/${country.name.official}`} >
                <CountryCard
                    key={country.name.official}
                    name={country.name.official}
                    capital={country.capital}
                    region={country.region}
                    population={country.population}
                    flag={country.flags.svg}
                />
            </Link>
        ))}
    </>
);
};

export default CountryList;

如您所见，我必须为所有三个挂钩解构“数据”和“isFetching”，这就是我知道函数的方式，我使用所有三个 API 挂钩的替代方法是什么，所以我可以在与我要显示的“CountryCard”相同的组件上使用它吗？

Answer 1

一方面，您可以决定不解构。

  const allResult = useGetAllQuery();
  const countriesResult = useGetCountryQuery();
  const regionResult= useGetRegionQuery(option);

  return (
      <>
          {countriesResult.data?.map((country) => (

或者，您在解构时重命名：


  const { data: all = [], isFetching: allFetching } = useGetAllQuery();
  const { data: countries = [], isFetching: countryFetching } = useGetCountryQuery();
  const { data: regions = [], isFetching: regionFetching } = useGetRegionQuery(option);

如何在同一组件中使用来自 redux-toolkit 的多个查询挂钩？

How do I use multiple Query hooks from redux-toolkit in the same component?

reactjs

redux

react-redux

react-hooks

redux-toolkit