Разделение данных по слайсам (а фактически по редьюсерам в 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()...
.
Вам ответят команда поддержки Хекслета или другие студенты.
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Загляните в раздел «Обсуждение»:
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.
Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно.
Наши выпускники работают в компаниях:
С нуля до разработчика. Возвращаем деньги, если не удалось найти работу.
Зарегистрируйтесь или войдите в свой аккаунт