Como buscar dados no React usando a consulta do kit de ferramentas Redux

React é uma biblioteca JavaScript popular para construir interfaces de usuário para aplicações web. Ao construir um aplicativo, é importante considerar uma abordagem de gerenciamento de dados eficiente para garantir que você busque e renderize os dados no navegador de forma adequada, em resposta às interações do usuário.

No entanto, gerenciar esse processo pode se tornar uma tarefa tediosa e propensa a erros, especialmente se você estiver buscando dados de várias fontes e precisar atualizar consistentemente vários estados. Nesses casos, o Redux Toolkit Query fornece uma solução eficiente.

Consulta do kit de ferramentas Redux (RTK Query) é uma ferramenta de busca de dados construída sobre o Redux Toolkit. Sua documentação oficial descreve o RTK Query como "uma poderosa ferramenta de busca e armazenamento de dados projetada para simplificar casos comuns para carregar dados em um aplicativo da web, eliminando a necessidade de escrever manualmente a lógica de busca e cache de dados você mesmo".

Essencialmente, ele fornece um conjunto de recursos e capacidades que agilizam o processo de busca e gerenciamento de dados de APIs ou qualquer outra fonte de dados de um aplicativo React.

Embora existam semelhanças entre o Redux Toolkit Query e o React Query, uma das principais vantagens do Redux Toolkit Query é sua integração perfeita com Redux, uma biblioteca de gerenciamento de estado, permitindo uma solução completa de busca de dados e gerenciamento de estado para aplicativos React quando usados ​​juntos.

Alguns dos principais recursos do RTK incluem cache de dados, um recurso de gerenciamento de consultas e tratamento de erros.

Para começar, você pode criar rapidamente um projeto React localmente usando o Criar aplicativo React comando.

mkdir React-RTQ
cd React-RTQ
npx create-react-app react-rtq-example
cd react-rtq-example 
npm start

Como alternativa, você pode configurar um projeto React usando o Vite, uma nova ferramenta de construção e servidor de desenvolvimento para aplicativos da web.

Você pode encontrar o código deste projeto neste Repositório GitHub.

Instale as dependências necessárias

Depois de ter seu projeto React instalado e funcionando, vá em frente e instale os seguintes pacotes.

npm install @reduxjs/toolkit react-redux

Definir uma fatia de API

Uma fatia de API é um componente que inclui a lógica Redux necessária para integração e interação com endpoints de API especificados. Ele fornece uma maneira padronizada de definir pontos de extremidade de consulta para buscar dados e pontos de extremidade de mutação para modificar os dados.

Essencialmente, uma fatia de API permite definir os pontos de extremidade para solicitar e fazer alterações nos dados de uma fonte específica, fornecendo uma abordagem simplificada para integração com APIs.

No origem diretório, crie uma nova pasta e nomeie-a, características. Dentro desta pasta, crie um novo arquivo: apiSlice.js, e adicione o código abaixo:

importar { createApi, fetchBaseQuery } de"@reduxjs/toolkit/query/react";
exportarconst produtosApi = criarApi({
 redutorPath: "produtosAp",
 baseQuery: fetchBaseQuery({ baseUrl: " https://dummyjson.com/" }),
 pontos finais: (construtor) => ({
 getAllProducts: builder.query({
 consulta: () =>"produtos",
 }),
 getProduct: builder.query({
 consulta: (produtos) =>`produtos/pesquisa? q=${produto}`, 
 }),
 }),
});
exportarconst { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Este código define uma fatia de API chamada produtosApi usando Redux Toolkit's createApi função. A fatia da API possui as seguintes propriedades:

• A redutorPath propriedade - define o nome do redutor na loja Redux.
• O baseQuery propriedade - especifica o URL base para todas as solicitações de API usando o fetchBaseQuery função fornecida pelo Redux Toolkit.
• API pontos finais - especifique os endpoints disponíveis para esta fatia de API usando o construtor objeto. Nesse caso, o código define dois pontos de extremidade.

Finalmente, dois ganchos são gerados a partir do API de produtos objeto que identifica os dois pontos de extremidade. Você pode usar esses ganchos em vários componentes do React para fazer solicitações de API, recuperar dados e alterar o estado em resposta à interação do usuário.

Essa abordagem simplifica o gerenciamento de estado e a busca de dados no aplicativo React.

Configurar a Loja Redux

Depois de buscar os dados da API, o RTK Query armazena os dados no armazenamento Redux. A loja, neste caso, serve como um hub central para gerenciar o estado das solicitações de API feitas a partir do React aplicativo, incluindo os dados recuperados dessas solicitações de API, garantindo que os componentes acessem e atualizem esses dados conforme necessário.

No diretório src, crie um loja.js arquivo e adicione as seguintes linhas de código:

importar { configureStore } de"@reduxjs/toolkit";
importar { produtosApi } de"./features/apiSlice";
exportarconst store = configureStore({
 redutor: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 middleware: (getDefaultMiddleware) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Este código cria uma nova loja Redux, com duas peças principais de configuração:

1. Redutor: Isso define como o armazenamento deve lidar com as atualizações do estado. Neste caso, o produtosApi.reducer é passado como a função redutora e recebe uma chave redutorPath exclusiva para identificá-la no estado geral do armazenamento.
2. Middleware: Isso define qualquer middleware adicional que deve ser aplicado à loja.

O resultado loja O objeto é um armazenamento Redux totalmente configurado, que pode ser usado para gerenciar o estado do aplicativo.

Ao configurar a loja dessa maneira, o aplicativo pode gerenciar facilmente o estado das solicitações de API e processar seus resultados de maneira padronizada usando o Redux Toolkit.

Crie um componente para implementar a funcionalidade RTK

No diretório src, crie um novo componentes pasta com um novo arquivo dentro: Data.js.

Adicione este código ao arquivo Data.js:

importar { useGetAllProductsQuery } de"../recursos/apiSlice";
importar Reagir, { useState } de"reagir";
importar"./product.component.css";
exportarconst Dados = () => {
const { data, error, isLoading, refetch } = useGetAllProductsQuery();
const [productsData, setProductsData] = useState([]);
const handleDisplayData = () => {
 buscar();
 setProductsData (dados?.produtos);
 };
retornar (
"recipiente de produto">
"botão de produto" onClick={handleDisplayData}>
 Mostrar dados
 </button>
 {está carregando && <div>Carregando...div>}
 {erro && <div>Erro: {error.message}div>}
"Rótulo do produto">Produtos:</label>
 {productsData && productsData.length > 0 && (


 {productsData.slice(0, 4).mapa((produtos) => (
"Detalhes do produto" chave={product.id}>
Nome: {product.title}</p>

Descrição: {product.description}</p>

Preço: {product.price}</p>
 </li>
 ))}
 </ul>
 )}
 </div>
 );
};

Este código demonstra um componente React que usa o gancho useGetAllProductsQuery fornecido pela fatia da API para recuperar dados do endpoint da API especificado.

Quando o usuário clica no botão Exibir dados, a função handleDisplayData é executada, enviando uma solicitação HTTP à API para recuperar os dados do produto. Assim que a resposta é recebida, a variável de dados dos produtos é atualizada com os dados da resposta. Por fim, o componente renderiza uma lista de detalhes do produto.

Atualize o componente do aplicativo

Faça as seguintes alterações no código no arquivo App.js:

importar"./App.css";
importar { Dados } de"./componentes/Dados";
importar { loja } de"./loja";
importar { Fornecedor } de"react-redux";
importar { ApiProvider } de"@reduxjs/toolkit/query/react";
importar { produtosApi } de"./features/apiSlice";
funçãoAplicativo() {
retornar (


"Aplicativo">

 </div>
 </ApiProvider>
 </Provider>
 );
}
exportarpadrão Aplicativo;

Esse código envolve o componente Data com dois provedores. Esses dois provedores concedem ao componente acesso ao armazenamento Redux e aos recursos de consulta RTK, permitindo que ele busque e exiba dados da API.

É fácil configurar o Redux Toolkit Query para recuperar dados com eficiência de uma fonte especificada com o mínimo de código. Além disso, você também pode incorporar funções para modificar os dados armazenados definindo pontos de extremidade de mutação no componente API slice.

Ao combinar os recursos do Redux com as habilidades de busca de dados do RTK, você pode obter uma solução abrangente de gerenciamento de estado para seus aplicativos da web React.