0Pricing
React Academy · Урок

Части Redux Toolkit и createSlice

Создавайте логику редьюсеров с помощью createSlice, определяйте действия и подключайте их к хранилищу Redux.

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

Добро пожаловать

В этом уроке Вы создадите срезы Redux Toolkit с помощью createSlice, определите действия и редьюсеры в одном месте и подключите их к store Redux.

Что такое Redux Toolkit?

Redux Toolkit (RTK) — это официальный подход к написанию Redux, предусматривающий определённую структуру. Он устраняет шаблонный код, объединяя редьюсеры, создатели действий и начальное состояние в одном вызове createSlice().

Установка

Установите Redux Toolkit и react-redux.
npm install @reduxjs/toolkit react-redux

createSlice

Вызовите createSlice() с именем, initialState и объектом reducers. RTK автоматически создаст создателей действий и типы действий.
import { createSlice } from '@reduxjs/toolkit';

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

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

Immer изнутри

RTK использует Immer внутри, поэтому Вы можете безопасно писать изменяющую состояние логику редьюсера (`state.value += 1`). Immer незаметно преобразует её в неизменяемое обновление.

Настройка хранилища

Создайте хранилище Redux с помощью configureStore() и добавьте свои срезы как редьюсеры.
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

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

Передача хранилища

Оберните приложение в Provider из react-redux и передайте ему store.
import { Provider } from 'react-redux';
import { store } from './store';

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

useSelector и useDispatch

Читайте состояние с помощью useSelector и отправляйте действия с помощью useDispatch. Для TypeScript используйте типизированные версии.
import { useSelector, useDispatch } from 'react-redux';

function Counter() {
  const value = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  return (
    <>
      <p>{value}</p>
      <button onClick={() => dispatch(increment())}>+</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </>
  );
}

Типы TypeScript

Экспортируйте типы RootState и AppDispatch из store.ts, чтобы хуки имели полную типизацию.
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
// Then use typed hooks:
const value = useSelector((s: RootState) => s.counter.value);

Дополнительные редьюсеры

Поле extraReducers обрабатывает действия из других срезов или createAsyncThunk. Используйте шаблон обратного вызова builder, чтобы добавлять ветви обработки.
extraReducers: (builder) => {
  builder.addCase(fetchUser.fulfilled, (state, action) => {
    state.user = action.payload;
  });
}

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

Почему внутри редьюсера Redux Toolkit можно писать изменяющий состояние код, например `state.value += 1`?

Итоги

createSlice объединяет name, initialState и reducers в один объект. Immer позволяет писать код редьюсеров в стиле изменяемого состояния. configureStore собирает срезы. useSelector читает состояние, а useDispatch отправляет действия.

Далее

Следующий урок: **Асинхронная логика с createAsyncThunk** — Вы научитесь обрабатывать запросы к API в Redux с помощью типов действий жизненного цикла.

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

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

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

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

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

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

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

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

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

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

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

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

  1. Части Redux Toolkit и createSlice
  2. Асинхронная логика с createAsyncThunk
  3. RTK Query: конечные точки и автоматическое кэширование
  4. Оптимистичные обновления и аннулирование кэша
← Назад к React Academy