Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

Подключение Redux Toolkit к React React: Redux Toolkit

В этом уроке мы соберем простое приложение с двумя кнопками меняющими значение счетчика. Это позволит увидеть основные концепции Redux Toolkit.

Для интеграции нам понадобятся два пакета, сам Toolkit и react-redux.

# Выполните в корне проекта
npm install @reduxjs/toolkit react-redux

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

components/
  | App.jsx
slices/
  | index.js
  | counterSlice.js
index.jsx

Начнем с верхнего уровня. Здесь нам понадобится компонент <Provider>, который содержит хранилище и прокидывает его вглубь дерева компонентов через контекст.

// file: index.jsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';

import App from './components/App.jsx';
import store from './slices/index.js';

const mountNode = document.getElementById('container');
const root = ReactDOM.createRoot(mountNode);
// Оборачиваем приложение в Provider
// и передаем в него хранилище
root.render(
  <Provider store={store}>
    <App />
  </Provider>,
);

Инициализируем хранилище с помощью функции configureStore(), которая, в отличии от такой же функции в Redux, умеет комбинировать редьюсеры самостоятельно. Функция принимает на вход объект с ключом reducer, значением которого является объект с редьюсерами.

// file: slices/index.js

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../slices/counterSlice.js';

export default configureStore({
  reducer: {
    // counter – имя внутри объекта состояния state.counter
    counter: counterReducer,
  },
});

Сами редьюсеры находятся в директории slices. Toolkit вводит новое понятие слайс (срез), которое объединяет в себе Reducers, Actions и многое другое. Подробнее о слайсах мы поговорим в следующем уроке.

// file: slices/counterSlice.js

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

// Начальное значение
const initialState = {
  value: 0,
};

const counterSlice = createSlice({
  name: 'counter',
  initialState,
  // Редьюсеры в слайсах мутируют состояние и ничего не возвращают наружу
  reducers: {
    increment: (state) => {
      state.value += 1;
    },
    decrement: (state) => {
      state.value -= 1;
    },
    // пример с данными
    incrementByAmount: (state, action) => {
      state.value += action.payload;
    },
  },
});

// Слайс генерирует действия, которые экспортируются отдельно
// Действия генерируются автоматически из имен ключей редьюсеров
export const { increment, decrement, incrementByAmount } = counterSlice.actions;

// По умолчанию экспортируется редьюсер сгенерированный слайсом
export default counterSlice.reducer;

Теперь самое главное – Toolkit в действии. Здесь мы опираемся на работу хуков. Как и раньше, для изменения состояния в хранилище, мы должны передать действие (action) в функцию dispatch(). Для получения dispatch используется функция useDispatch().

// file: components/App.jsx

import React from 'react';
// Хуки находятся в react-redux
import { useSelector, useDispatch } from 'react-redux';
// Импортируем нужные действия
import { decrement, increment } from '../slices/counterSlice.js';

export default () => {
  // Вытаскиваем данные из хранилища. state – все состояние
  const count = useSelector((state) => state.counter.value);
  // Возвращает метод store.dispatch() текущего хранилища
  const dispatch = useDispatch();

  return (
    <div>
      <div>
        <button
          aria-label="Increment value"
          onClick={() => dispatch(increment())}
        >
          Прибавить
        </button>
        <span>{count}</span>
        <button
          aria-label="Decrement value"
          onClick={() => dispatch(decrement())}
        >
          Отнять
        </button>
      </div>
    </div>
  );
};

И живой пример:

See the Pen js_redux_toolkit_integration-1 by Hexlet (@hexlet) on CodePen.

Часть этой инициализации делается один раз и потом почти не меняется. Основной код приложения будет добавляться в компонентах и слайсах. И в отличие от чистого Redux, этого кода будет значительно меньше, благодаря слайсам и возможности мутировать данные внутри редьюсеров. Об этом подробнее в следующем уроке.


Самостоятельная работа

  1. Создайте репозиторий для экспериментов с кодом из урока
  2. Повторите шаги из урока локально внутри этого репозитория
  3. Зафиксируйте изменения в репозитории

Дополнительные материалы

  1. Redux DevTools

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты.

Ошибки, сложный материал, вопросы >
Нашли опечатку или неточность?

Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.

Что-то не получается или материал кажется сложным?

Загляните в раздел «Обсуждение»:

  • задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
  • расскажите о своих впечатлениях. Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
  • изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
900
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.

  • 130 курсов, 2000+ часов теории
  • 900 практических заданий в браузере
  • 360 000 студентов
Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы

С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.

Иконка программы Фронтенд-разработчик
Профессия
Разработка фронтенд-компонентов веб-приложений
1 июня 10 месяцев

Используйте Хекслет по максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Даю согласие на обработку персональных данных, соглашаюсь с «Политикой конфиденциальности» и «Условиями оказания услуг»