Путаница с дополнительными свойствами, хранящимися в состоянии Redux при использовании запроса RTK

Если я хочу получить доступ к данным, полученным из API, нужно ли мне получать это вот так?

const data = useSelector((state: any) => state.todoAPI.queries.getTodos);

Кажется, что нужно много сверлить объекты только для того, чтобы получить ответ вызов API. Кроме того, мне не нужны такие данные, как статус, «startTimestamp» и «fulledTimestamp», хранящиеся в магазине Redux. Почему я должен нести их по штату?

Да, хотя срез API построен поверх createSlice и createAsyncThunk и все данные конечной точки хранятся в хранилище, вы не намерены выбирать это состояние вручную. Это то, что RTKQ использует для управления подписками конечных точек. Думайте о большей части состояния среза API как о деталях реализации.

Есть ли способ упростить доступ только к данным ответа и избежать хранение ненужных свойств в штате?

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

Основной метод RTK Query createApi не зависит от пользовательского интерфейса. что основная библиотека Redux и Redux Toolkit не зависят от пользовательского интерфейса. Они — это простая логика JS, которую можно использовать где угодно.

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

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

Основное изменение — импорт createApi из "@reduxjs/toolkit/query/react" вместо обычного "@reduxjs/toolkit/query" экспорта.

Убедитесь, что вы импортируете:

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

Из вашего фрагмента todoAPI убедитесь, что вы получаете доступ к сгенерированным хукам и экспортируете их.

Пример:

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

export const todoApi = createApi({
  ...
  endpoints: builder => ({
    ...
    getTodos: builder.query({
      ...
    }),
    ...
  }),
});

export const {
  ...
  useGetTodosQuery,
  useLazyGetTodosQuery,
  ...
} = todoApi;

Импортируйте и используйте сгенерированные перехватчики, и теперь вместо того, чтобы вручную выбирать состояние запроса из хранилища, перехватчики возвращают эти данные напрямую (среди всех связанных метаданных, например, загрузка/извлечение/успех/ошибка/и т. д.).

const { data } = useGetTodosQuery();
// or
const { data } = todoApi.useGetTodosQuery();

const [trigger, { data }] = useLazyGetTodosQuery();
//or
const [trigger, { data }] = todoApi.useLazyGetTodosQuery();