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

Дополнительные редьюсеры (Extra Reducers) 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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