Поиск по сайту:

Как получить данные в React с помощью запроса Redux Toolkit


Redux Toolkit Query может облегчить вам большую часть работы по управлению данными. Узнайте, как это сделать.

React — популярная библиотека JavaScript для создания пользовательских интерфейсов веб-приложений. При создании приложения важно учитывать эффективный подход к управлению данными, чтобы обеспечить правильное получение и отображение данных в браузере в зависимости от взаимодействия с пользователем.

Однако управление этим процессом может оказаться утомительной и подверженной ошибкам задачей, особенно если вы получаете данные из нескольких источников и вам необходимо последовательно обновлять ряд состояний. В таких случаях Redux Toolkit Query предоставляет эффективное решение.

Что такое запрос Redux Toolkit?

Redux Toolkit Query (RTK Query) — это инструмент извлечения данных, созданный на основе Redux Toolkit. В его официальной документации RTK Query описывается как «мощный инструмент извлечения и кэширования данных, предназначенный для упрощения распространенных случаев загрузки данных в веб-приложение, устраняя необходимость самостоятельно писать логику извлечения и кэширования данных».

По сути, он предоставляет набор функций и возможностей, которые упрощают процесс получения и управления данными из API или любого другого источника данных из приложения React.

Несмотря на то, что между Redux Toolkit Query и React Query есть сходство, одним из основных преимуществ Redux Toolkit Query является его бесшовная интеграция с Redux, библиотекой управления состоянием, позволяющая создать комплексное решение для извлечения данных и управления состоянием для приложений React при совместном использовании.

Некоторые из основных функций RTK включают кэширование данных, функцию управления запросами и обработку ошибок.

Начало работы с запросом Redux Toolkit в приложении React

Для начала вы можете быстро развернуть проект React локально с помощью команды Создать приложение React.

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

Кроме того, вы можете настроить проект React с помощью Vite, нового инструмента сборки и сервера разработки для веб-приложений.

Вы можете найти код этого проекта в этом репозитории GitHub.

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

После того как ваш проект React запущен и запущен, установите следующие пакеты.

npm install @reduxjs/toolkit react-redux

Определить фрагмент API

Срез API — это компонент, который включает в себя необходимую логику Redux для интеграции и взаимодействия с указанными конечными точками API. Он обеспечивает стандартизированный способ определения как конечных точек запроса для получения данных, так и конечных точек мутации для изменения данных.

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

В каталоге src создайте новую папку и назовите ее features. Внутри этой папки создайте новый файл: apiSlice.js и добавьте приведенный ниже код:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
export const productsApi = createApi({
  reducerPath: "productsAp",
  baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/" }),
  endpoints: (builder) => ({
    getAllProducts: builder.query({
      query: () => "products",
    }),
    getProduct: builder.query({
      query: (product) => `products/search?q=${product}`, 
    }),
  }),
});
export const { useGetAllProductsQuery , useGetProductQuery } = productsApi;

Этот код определяет фрагмент API под названием productsApi с использованием функции createApi Redux Toolkit. Срез API принимает следующие свойства:

  • Свойство reducerPath — устанавливает имя редуктора в хранилище Redux.
  • Свойство baseQuery — указывает базовый URL-адрес для всех запросов API с использованием функции fetchBaseQuery, предоставляемой Redux Toolkit.
  • API конечные точки – укажите доступные конечные точки для этого фрагмента API с помощью объекта builder. В этом случае код определяет две конечные точки.

Наконец, из объекта productsAPI генерируются два перехватчика, которые идентифицируют две конечные точки. Вы можете использовать эти перехватчики в различных компонентах React, чтобы отправлять запросы API, получать данные и изменять состояние в ответ на взаимодействие пользователя.

Этот подход упрощает управление состоянием и получение данных в приложении React.

Настройте хранилище Redux

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

В каталоге src создайте файл store.js и добавьте следующие строки кода:

import { configureStore } from "@reduxjs/toolkit";
import { productsApi } from "./features/apiSlice";
export const store = configureStore({
  reducer: {
   [productsApi.reducerPath]: productsApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
   getDefaultMiddleware().concat(productsApi.middleware),
});

Этот код создает новое хранилище Redux с двумя основными частями конфигурации:

  1. Reducer: определяет, как хранилище должно обрабатывать обновления состояния. В этом случае productsApi.reducer передается как функция редуктора и ему присваивается уникальный ключ редуктора, позволяющий идентифицировать его в общем состоянии хранилища.
  2. Промежуточное программное обеспечение: определяет любое дополнительное промежуточное программное обеспечение, которое должно применяться к хранилищу.

Полученный объект store представляет собой полностью настроенное хранилище Redux, которое можно использовать для управления состоянием приложения.

Настроив хранилище таким образом, приложение сможет легко управлять состоянием запросов API и стандартизированно обрабатывать их результаты с помощью Redux Toolkit.

Создайте компонент для реализации функциональности RTK.

В каталоге src создайте новую папку компоненты с новым файлом внутри: Data.js.

Добавьте этот код в файл Data.js:

import { useGetAllProductsQuery } from "../features/apiSlice";
import React, { useState } from "react";
import "./product.component.css";
export const Data = () => {
  const { data, error, isLoading, refetch } = useGetAllProductsQuery();
  const [productsData, setProductsData] = useState([]);
  const handleDisplayData = () => {
    refetch();
    setProductsData(data?.products);
  };
  return (
    <div className="product-container">
      <button className="product-button" onClick={handleDisplayData}>
        Display Data
      </button>
      {isLoading && <div>Loading...</div>}
      {error && <div>Error: {error.message}</div>}
      <label className="product-label">Products:</label>
      {productsData && productsData.length > 0 && (
        <ul>
          {productsData.slice(0, 4).map((product) => (
            <li className="product-details" key={product.id}>
              <p>Name: {product.title}</p>
              <p>Description: {product.description}</p>
              <p>Price: {product.price}</p>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

Этот код демонстрирует компонент React, который использует ловушку useGetAllProductsQuery, предоставляемую срезом API, для получения данных из указанной конечной точки API.

Когда пользователь нажимает кнопку «Отобразить данные», выполняется функция handleDisplayData, отправляющая HTTP-запрос в API для получения данных о продукте. После получения ответа переменная данных продуктов обновляется данными ответа. Наконец, компонент отображает список сведений о продукте.

Обновите компонент приложения

Внесите следующие изменения в код файла App.js:

import "./App.css";
import { Data } from "./components/Data";
import { store } from "./store";
import { Provider } from "react-redux";
import { ApiProvider } from "@reduxjs/toolkit/query/react";
import { productsApi } from "./features/apiSlice";
function App() {
  return (
    <Provider store={store}>
      <ApiProvider api={productsApi}>
        <div className="App">
          <Data />
        </div>
      </ApiProvider>
    </Provider>
  );
}
export default App;

Этот код объединяет компонент данных с двумя поставщиками. Эти два поставщика предоставляют компоненту доступ к хранилищу Redux и функциям RTK Query, позволяющим ему получать и отображать данные из API.

Использование запросов Redux Toolkit в веб-приложениях

Redux Toolkit Query легко настроить для эффективного получения данных из указанного источника с минимальным количеством кода. Кроме того, вы также можете включать функции для изменения хранимых данных, определяя конечные точки мутации в компоненте среза API.

Объединив функции Redux с возможностями извлечения данных RTK, вы можете получить комплексное решение по управлению состоянием для ваших веб-приложений React.

Статьи по данной тематике: