TypeScript Academy · Урок

Типизация срезов и асинхронных действий Redux Toolkit

Используйте createSlice и createAsyncThunk с полным выводом типов

Урок 1 из 413 шагов

«Типизация срезов и асинхронных действий Redux Toolkit» — бесплатный урок TypeScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения TypeScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс TypeScript Academy содержит 4 уроков всего.

Зачем типизировать Redux Toolkit

Redux Toolkit (RTK) включает отличную поддержку TypeScript. Правильная типизация гарантирует типобезопасность действий, состояния и асинхронных функций без ручных утверждений типов.

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

Типизация интерфейса состояния

Определите состояние среза как интерфейс TypeScript до создания среза.

interface UserState {
  users: User[];
  loading: boolean;
  error: string | null;
}

const initialState: UserState = {
  users: [],
  loading: false,
  error: null,
};

createSlice с типизированным состоянием

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

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {
    setLoading(state, action: PayloadAction<boolean>) {
      state.loading = action.payload; // state: UserState — typed
    },
  },
});

Типизация PayloadAction

Используйте PayloadAction из RTK, чтобы типизировать action.payload в редьюсерах.

import { PayloadAction } from "@reduxjs/toolkit";

reducers: {
  addUser(state, action: PayloadAction<User>) {
    state.users.push(action.payload); // action.payload: User
  },
}

createAsyncThunk с типами

Укажите типы возвращаемого значения, аргумента асинхронной функции и конфигурации API этой функции.

const fetchUsers = createAsyncThunk<User[], void, { rejectValue: string }>(
  "users/fetchAll",
  async (_, { rejectWithValue }) => {
    try {
      return await api.getUsers();
    } catch (e) {
      return rejectWithValue("Failed to fetch");
    }
  }
);

Обработка действий асинхронных функций в extraReducers

Используйте API обратного вызова builder для полностью типизированной обработки ожидающих, выполненных и отклонённых действий асинхронных функций.

const userSlice = createSlice({
  name: "users",
  initialState,
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsers.pending, (state) => { state.loading = true; })
      .addCase(fetchUsers.fulfilled, (state, action) => {
        state.users = action.payload; // action.payload: User[]
        state.loading = false;
      })
      .addCase(fetchUsers.rejected, (state, action) => {
        state.error = action.payload ?? "Unknown error";
      });
  },
});

Типизированные RootState и AppDispatch

Экспортируйте типизированные RootState и AppDispatch из файла хранилища для использования в селекторах и хуках.

import { configureStore } from "@reduxjs/toolkit";
const store = configureStore({ reducer: { users: userSlice.reducer } });
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Типизированные useSelector и useDispatch

Создайте типизированные версии хуков Redux, чтобы не повторять утверждения типов в каждом компоненте.

import { useDispatch, useSelector, TypedUseSelectorHook } from "react-redux";
export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

Типизация RTK Query

RTK Query создаёт полностью типизированные хуки на основе определений конечных точек — вручную типизировать ответы не требуется.

const api = createApi({
  reducerPath: "api",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  endpoints: (build) => ({
    getUser: build.query<User, string>({
      query: (id) => `/users/${id}`,
    }),
  }),
});
export const { useGetUserQuery } = api;

Типизация селекторов

Пишите типизированные селекторы с использованием RootState, чтобы обеспечить типобезопасный доступ к состоянию.

const selectUsers = (state: RootState): User[] => state.users.users;
const selectLoading = (state: RootState): boolean => state.users.loading;

Итоги: типизированный RTK

TypeScript в Redux Toolkit: определяйте интерфейс состояния, используйте PayloadAction в редьюсерах, типизируйте обобщённые параметры createAsyncThunk, экспортируйте RootState и AppDispatch и создавайте обёртки типизированных хуков.

Быстрая проверка

Какая аннотация типа делает action.payload в редьюсере RTK типобезопасным?

Чему Вы научились

TypeScript в Redux Toolkit: определяйте интерфейсы состояния срезов, используйте PayloadAction в редьюсерах, типизируйте createAsyncThunk с тремя обобщёнными параметрами и экспортируйте типизированные RootState/AppDispatch вместе с обёртками хуков для использования в компонентах.

Можно начать бесплатно

Изучай TypeScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
101
Уроки
352

Часто задаваемые вопросы

Урок «Типизация срезов и асинхронных действий Redux Toolkit» бесплатный?

Да — полный текст урока «Типизация срезов и асинхронных действий Redux Toolkit» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс TypeScript Academy, подпишись на CoddyKit PRO. Курс TypeScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Типизация срезов и асинхронных действий Redux Toolkit»?

Используйте createSlice и createAsyncThunk с полным выводом типов Ты практикуешь TypeScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать TypeScript Academy?

Предыдущий опыт не требуется. TypeScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Типизация срезов и асинхронных действий Redux Toolkit»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке TypeScript Academy?

Да. Каждый урок TypeScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Типизация срезов и асинхронных действий Redux Toolkit
  2. Шаблоны типизации хранилищ Zustand
  3. XState: типизированные конечные автоматы
  4. Производное состояние и селекторы с типами
← Назад к TypeScript Academy