Frontend Academy · Урок

Redux Toolkit: createSlice и configureStore

Определяйте срезы состояния с помощью createSlice, объединяйте их в configureStore и отправляйте действия из компонентов React, используя useDispatch и useSelector.

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

Зачем нужен Redux Toolkit

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

Установка Redux Toolkit

Установите RTK и привязку к React.

npm install @reduxjs/toolkit react-redux

createSlice — состояние, обработчик и действия

createSlice создаёт срез состояния вместе с его обработчиком и создателями действий за один вызов. Внутри он использует Immer для неизменяемых обновлений.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value++; },     // Immer: mutate directly
    decrement: state => { state.value--; },
    reset: state => { state.value = 0; },
    incrementBy: (state, action) => { state.value += action.payload; }
  }
});

export const { increment, decrement, reset, incrementBy } = counterSlice.actions;
export default counterSlice.reducer;

configureStore — сборка хранилища

configureStore создаёт хранилище Redux с разумными настройками по умолчанию: Redux DevTools включён, промежуточное ПО thunk подключено.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import cartReducer from './cartSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    cart: cartReducer,
  }
});

// TypeScript types:
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Предоставление хранилища

Оберните приложение в <Provider store={store}> из react-redux.

import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

useSelector — чтение состояния

useSelector(selector) читает данные из хранилища. Компонент повторно отрисовывается, когда выбранный срез изменяется.

import { useSelector } from 'react-redux';
import type { RootState } from './store';

function Counter() {
  const count = useSelector((state: RootState) => state.counter.value);
  return <p>Count: {count}</p>;
}

useDispatch — отправка действий

useDispatch() возвращает функцию dispatch хранилища. Вызовите её с создателем действия, чтобы инициировать изменение состояния.

import { useDispatch } from 'react-redux';
import { increment, incrementBy } from './counterSlice';

function Controls() {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </div>
  );
}

createAsyncThunk — асинхронные действия

createAsyncThunk из RTK обрабатывает асинхронные операции (вызовы API) и автоматически отправляет действия pending, fulfilled и rejected.

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk(
  'user/fetchById',
  async (userId: string) => {
    const res = await fetch(`/api/users/${userId}`);
    return res.json(); // becomes action.payload on fulfilled
  }
);

// In slice:
extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => { state.loading = true; })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    });
}

RTK Query — встроенное получение данных

RTK Query (часть RTK) обеспечивает автоматическое получение данных, кэширование и инвалидацию. Определите конечные точки API и получите сгенерированные хуки.

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

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (build) => ({
    getUsers: build.query<User[], void>({ query: () => 'users' }),
  })
});

// Generated hook:
const { data, isLoading, error } = api.useGetUsersQuery();

Immer в обработчиках состояния

RTK использует Immer внутри, поэтому обработчики срезов могут напрямую изменять состояние. Immer обнаруживает изменения и создаёт новый неизменяемый объект состояния — Вы получаете удобство изменяемого подхода и безопасность неизменяемости.

Redux DevTools

Расширение браузера Redux DevTools позволяет просматривать каждое отправленное действие и результирующее состояние, а также перемещаться во времени: переходить к любому предыдущему состоянию. Это незаменимый инструмент для отладки сложных потоков состояния.

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

Что createSlice в Redux Toolkit создаёт автоматически?

Итоги: Redux Toolkit

createSlice объединяет обработчик состояния и действия в одном определении. Immer позволяет безопасно «изменять» состояние. configureStore собирает обработчики состояния, подключая DevTools и thunk. useSelector читает состояние. useDispatch отправляет действия. createAsyncThunk предназначен для асинхронных потоков. RTK Query — для полноценного получения данных с кэшированием.

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

Урок «Redux Toolkit: createSlice и configureStore» бесплатный?

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

Чему я научусь в уроке «Redux Toolkit: createSlice и configureStore»?

Определяйте срезы состояния с помощью createSlice, объединяйте их в configureStore и отправляйте действия из компонентов React, используя useDispatch и useSelector. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

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

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

Сколько времени занимает урок «Redux Toolkit: createSlice и configureStore»?

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

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

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

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

Redux Toolkit: createSlice и configureStore
Zustand для лёгкого состояния React
Pinia для Vue: defineStore и storeToRefs
Когда использовать глобальное и локальное состояние

← Назад к Frontend Academy