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

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

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