20.04.2023 в 20:38

Упрощенный выбор данных с помощью RTK Query: подробное руководство

Извлечение данных из API может быть утомительной и отнимающей много времени задачей, но при наличии правильных инструментов и методов это можно сделать проще и эффективнее. Одним из таких инструментов является Redux Toolkit Query (RTK Query), который представляет собой мощную библиотеку, упрощающую выборку данных и кэширование для приложений Redux.

В этой статье мы рассмотрим, как использовать RTK-запрос для извлечения данных из API и как это может облегчить вашу жизнь. Мы также предоставим примеры кода, которые помогут вам начать работу.

Начало

Прежде чем мы углубимся в код, важно понять, что такое RTK-запрос и как он работает. RTK Query - это библиотека, предоставляющая набор перехватчиков и утилит, которые помогут вам извлекать данные из API и управлять их состоянием в вашем хранилище Redux.

Одной из ключевых особенностей RTK-запроса является его механизм кэширования. Он автоматически кэширует ответы на ваши запросы API, что помогает сократить количество выполняемых запросов и повысить производительность вашего приложения.

Еще одной важной особенностью RTK Query является его способность обрабатывать сложные ответы API. Он может обрабатывать вложенные структуры данных и может нормализовать данные ответа в нормализованную структуру данных, с которой легче работать.

Теперь, когда у нас есть базовое представление о RTK-запросе, давайте посмотрим, как мы можем использовать его для извлечения данных из API.

Получение данных

Создайте новое приложение React, используя Create React App:

npx create-react-app my-app
cd my-app

Установите необходимые зависимости:

npm install @reduxjs/toolkit react-redux @reduxjs/toolkit/query axios

@reduxjs/toolkit предоставляет необходимые инструменты для создания хранилища и слайсов Redux.
react-redux предоставляет необходимые компоненты для интеграции Redux с React.
@reduxjs/toolkit/query предоставляет необходимые инструменты для использования RTK Query.
axios — популярная библиотека для создания HTTP-запросов.

Создайте новый фрагмент RTK Query API:

Создайте новый файл с именем api.js в каталоге src со следующим содержимым:

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query';
import axios from 'axios';

export const apiSlice = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://jsonplaceholder.typicode.com/',
  }),
  endpoints: (builder) => ({
    getPosts: builder.query({
      query: () => 'posts',
    }),
  }),
  tagTypes: ['Post'],
  endpoints: (builder) => ({
    getPost: builder.query({
      query: (id) => `posts/${id}`,
      transformResponse: (response) => ({
        ...response,
        tag: 'Post',
      }),
      providesTags: (result, error, id) => [{ type: 'Post', id }],
    }),
  }),
});

export const { useGetPostsQuery, useGetPostQuery } = apiSlice;

Функция createApi создает новый фрагмент RTK Query API.
reducerPath указывает имя слайса хранилища Redux для API.
baseQuery указывает функцию для выполнения HTTP-запросов к API.
endpoints указывает конечные точки API, которые могут использоваться RTK Query.
tagTypes указывает различные типы тегов, которые можно использовать для кэширования ответов API.
transformResponse указывает функцию для преобразования ответа API перед его сохранением в кэше.
ProvideTags указывает теги, которые следует использовать для кэширования ответа API.

Создайте новый магазин Redux:

Создайте новый файл с именем store.js в каталоге src со следующим содержимым:

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './api';

export const store = configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(apiSlice.middleware),
});

configureStore создает новый магазин Redux.
Свойство reducer указывает редьюсеры, используемые хранилищем.
Свойство middleware указывает ПО промежуточного слоя, используемое хранилищем.

Используйте хуки RTK Query в своих компонентах React:

Создайте новый файл с именем App.js в каталоге src со следующим содержимым:

import { useGetPostsQuery, useGetPostQuery } from './api';

function App() {
  const { data: posts, isLoading: isLoadingPosts, error: errorPosts } =
    useGetPostsQuery();
  const { data: post, isLoading: isLoadingPost, error: errorPost } =
    useGetPostQuery(1);
 return (
   <div>
     <h1>Posts</h1>
     {isLoadingPosts && <p>Loading posts...</p>}
     {errorPosts && <p>Error loading posts: {errorPosts}</p>}
     {posts &&
       posts.map((post) => (
         <div key={post.id}>
           <h2>{post.title}</h2>
           <p>{post.body}</p>
         </div>
       ))}
     <h1>Post 1</h1>
     {isLoadingPost && <p>Loading post...</p>}
     {errorPost && <p>Error loading post: {errorPost}</p>}
     {post && (
       <div>
         <h2>{post.title}</h2>
         <p>{post.body}</p>
       </div>
     )}
   </div>
 );
}

export default App;

Хук useGetPostsQuery используется для получения всех сообщений из API.
Хук useGetPostQuery используется для получения определенного сообщения из API.
Свойство data содержит данные, возвращаемые API.
Свойство isLoading указывает, загружается ли в данный момент API.
Свойство error содержит ошибку, возвращаемую API.

Запустите приложение React:

npm start

Заключение

В заключение, RTK Query — это мощная библиотека, которая упрощает выборку и кэширование данных для приложений Redux. Он предоставляет набор хуков и утилит, которые упрощают получение данных из API и управление их состоянием в вашем магазине Redux.

#JavaScript #React #Начинающим #Redux

1972

Войти на сайт