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

Механизм ExtraReducers React: Redux Toolkit

Разделение данных по слайсам и по редьюсерам в Redux приводит к ситуациям, когда на одно действие нужно реагировать в разных частях хранилища. Например, если мы удаляем пост, то нужно удалить и комментарии к нему — а они находятся в другом слайсе.

В Redux такая задача решается просто — мы добавляем в switch реакции на нужное действие по его имени. В Redux Toolkit так уже не получится. Дело в том, что между редьюсерами и действиями есть неразрывная связь. Это цена, которую мы платим за сокращение кода.

Для реакции на действия, происходящие в других слайсах, Redux Toolkit добавляет extraReducers — механизм дополнительных редьюсеров. Работает он достаточно просто. В слайс добавляется свойство extraReducers, через которое можно устанавливать реакцию (редьюсеры) на внешние действия:

// Импортируем из других слайсов действия, на которые нужно реагировать
import { removePost } from '../postsSlice.js';

const postCommentsAdapter = createEntityAdapter();
const initialState = postCommentsAdapter.getInitialState();

const postCommentsSlice = createSlice({
  name: 'comments',
  initialState: initialState,
  reducers: {
    // Обычные редьюсеры
  },
  extraReducers: (builder) => { // Дополнительные редьюсеры
    // При удалении поста нужно удалить все его комментарии
    builder.addCase(removePost, (state, action) => {
      const postId = action.payload;
      // Выбираем все комментарии кроме тех, что нужно удалить
      const restEntities = Object.values(state.entities).filter((e) => e.postId !== postId);
      // setAll удаляет текущие сущности и добавляет новые
      postCommentsAdapter.setAll(state, restEntities);
    });
  },
});

// Где-то в приложении
dispatch(removePost(post.id));

Дополнительные редьюсеры добавляются как кейсы в объект builder, изменяя его напрямую. Поэтому нам не нужно ничего возвращать. Более того, builder поддерживает цепочки, то есть мы можем вызывать добавление кейсов друг за другом:

builder.addCase().addCase()...

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

  1. Документация по Extra Reducers
  2. Как увидеть state внутри reduce

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

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

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

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

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

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

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

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

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

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

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

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 21 марта
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 21 марта

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

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

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

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»