Uma Introdução ao Redux Toolkit Query

Uma Introdução ao Redux Toolkit Query

Parte 1

Segundo seus criadores, o RTK Query é uma poderosa ferramenta de busca e cache de dados. Ele foi projetado para simplificar casos comuns de carregamento de dados em um aplicativo da Web, eliminando a necessidade de escrever manualmente a lógica de busca e armazenamento em cache .

Ele é um complemento opcional incluído no pacote Redux Toolkit e sua funcionalidade é construída sobre as outras APIs no Redux Toolkit.

O RTK Query está incluído na instalação do pacote principal do Redux Toolkit. Está disponível através de um dos dois pontos de entrada abaixo:

import  { createApi }  from  '@reduxjs/toolkit/query'  

/* Ponto de entrada específico do React que gera automaticamente
   hooks correspondentes aos endpoints definidos */
import  { createApi }  from  '@reduxjs/toolkit/query/react'

A consulta RTK inclui estas APIs:

• createApi(): o núcleo da funcionalidade do RTK Query. Ele permite que você defina um conjunto de endpoints e descreva como recuperar dados de uma série de endpoints, incluindo a configuração de como buscar e transformar esses dados. Na maioria dos casos, você deve usar isso uma vez por aplicativo, com "uma fatia de API por URL base" como regra geral.
• fetchBaseQuery(): Um pequeno wrapper fetchque visa simplificar as solicitações. Pretendido como o recomendado baseQuerypara ser usado createApipara a maioria dos usuários.

Abaixo um exemplo de uso com React

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const jediOrderApi = createApi({
  reducerPath: "jediOrderApi",
  baseQuery: fetchBaseQuery({ baseUrl: "http://localhost:8000/" }),
  tagTypes: ["JediOrder"],
  endpoints: (builder) => ({
    getJediOrder: builder.query({
      query: (page = 1) => `starwars?_page=${page}&_limit=5`,
      providesTags: ["JediOrder"],
    }),
    createJedi: builder.mutation({
      query: (jedi) => ({
        url: "starwars",
        method: "POST",
        body: { jedi },
      }),
      invalidatesTags: ["JediOrder"],
    }),
  }),
});

export const {
  useGetJediOrderQuery,
  useCreateJediMutation,
  reducer,
  middleware,
} = jediOrderApi;

A createApi é uma função que permite definir endpoints para uma API, gerar reducers e actions do Redux e configurar outras opções para a API. A fetchBaseQuery é uma função que retorna um adaptador base para fazer solicitações de API com fetch.

A jediOrderApi é criada com a configuração da reducerPath, que é o nome do slice na store do Redux, o baseQuery, que é o adaptador base para fazer as solicitações, tagTypes, que é uma lista de nomes de tags para identificar os dados retornados pela API, e endpoints, que é um objeto com as definições dos endpoints da API.

tagTypes é uma propriedade opcional na configuração da API slice que permite adicionar tags aos dados retornados por uma consulta ou mutação.

As tags são uma maneira de identificar os dados retornados pela API e rastrear seu estado na store do Redux. Isso é especialmente útil quando se trabalha com consultas em cache, pois permite que você atualize facilmente os dados em cache quando eles são alterados no servidor.

tagTypes é um array de strings que define os tipos de tag a serem usados pela API. Por exemplo, em jediOrderApi definido no código acima, tagTypes é definido como ['JediOrder'].

Quando uma consulta ou mutação é executada, as tags especificadas em providesTags ou invalidatesTags são automaticamente geradas para cada tipo de tag definido em tagTypes. Essas tags são adicionadas aos dados retornados ou afetados pela consulta ou mutação, permitindo que eles sejam facilmente rastreados e atualizados na store do Redux.

Nesse caso, existem dois endpoints definidos: getJediOrder e createJedi. O getJediOrder é uma query que retorna uma lista de Jedi em ordem de registro, paginados com 5 Jedi por página. Ele usa o parâmetro page para definir a página a ser buscada e especifica que essa query fornece a tag JediOrder.

O createJedi é uma mutation que cria um novo Jedi. Ele recebe um objeto Jedi como argumento e usa esse objeto para criar uma solicitação POST para a URL starwars. Ele também especifica que essa mutation invalida a tag JediOrder.

Por fim, o código exporta as funções useGetJediOrderQuery e useCreateJediMutation, que são hooks gerados automaticamente pela createApi para executar as queries e mutations definidas na jediOrderApi. Ele também exporta o reducer e o middleware, que são o reducer e o middleware gerados pela createApi para gerenciar o estado da API na store do Redux.