Типизация срезов и асинхронных действий Redux Toolkit
Используйте createSlice и createAsyncThunk с полным выводом типов
«Типизация срезов и асинхронных действий 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 — локальная установка не требуется.
Все уроки этого курса
- Типизация срезов и асинхронных действий Redux Toolkit
- Шаблоны типизации хранилищ Zustand
- XState: типизированные конечные автоматы
- Производное состояние и селекторы с типами