1️⃣Теория / подготовка

Ссылка на стартовый архив

🔗 Ссылки

• https://redux-toolkit.js.org/introduction/getting-started#rtk-query

• https://redux-toolkit.js.org/rtk-query/overview

• https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics

⚡ 1) Теория

RTK Query (Redux Toolkit Query) - это библиотека для управления запросами и состоянием приложения в React-приложениях с использованием Redux Toolkit. Она упрощает выполнение запросов к API и управление состоянием данных в приложении.

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

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

Вот некоторые особенности RTK Query:

• Автоматический кэш: RTK Query кэширует ответы на запросы и обновляет их только при необходимости.

• Нормализация данных: RTK Query может автоматически нормализовать данные, полученные от API, чтобы облегчить их использование в приложении.

• Конфигурируемость: RTK Query позволяет настраивать различные параметры запросов, такие как время ожидания, повторные попытки, тип запроса и многое другое.

• Автоматическая обработка ошибок: RTK Query автоматически обрабатывает ошибки, связанные с запросами, и предоставляет удобные способы обработки этих ошибок в вашем приложении.

• Управление состоянием: RTK Query управляет состоянием данных в вашем приложении и предоставляет способы получения и обновления данных из любой части приложения.

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

⚡ 2) Подготовка

❗Данный пункт уже выполнен (код в архиве). Вам нужно только в 2-метах ввести свои данные.

• в компоненте Login ввести свои данные (в архиве хакдкод преподавателя)

• в packs.api.ts ввести свой id (в архиве хакдкод преподавателя)

Для того чтобы разобрать работу с RTK query будем работать со страницей карточек (Cards). Чтобы сделать запрос за карточками необходимо:

• проделывать CRUD операции с карточками можно только в своей колоде. Поэтому давайте в запросе за колодами запрашивать только собственные колоды

packs.api.ts

  getPacks: () => {
    return instance.get<FetchPacksResponseType>("cards/pack", {
      params: {
        //❗Ваш user_id
        user_id: "6435620aaf58963e887fb0f4",
        pageCount: 20,
      },
    });
  },

• добавить кнопку перейти на страницу карточек . При нажатии на данную кнопку переходить на страницу карточек, при этом записываю в URL id колоды. (Чтобы сделать запрос за карточками нам необходимо знать id колоды)

Packs.tsx

 const navigateToCardsPageHandler = (packId: string) => {
   navigate(`/cards/${packId}`);
 };

• создать страницу карточек и в ней достать packId. Вывести в консоль и убедиться, что все отрабатывает верно

Cards.tsx

import { useParams } from "react-router-dom"

export const Cards = () => {
  let { packId } = useParams<{ packId: string }>();
  console.log("packId: ", packId);

  return (
    <div>
      <h1>Cards</h1>
    </div>
  );
};