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

Метод 1. Диспетчеризация действий вручную
Самый простой подход — вручную отправить одно и то же действие по всем соответствующим фрагментам. Предположим, у нас есть три фрагмента в нашем хранилище Redux: sliceA, sliceBи sliceC. Чтобы отправить общее действие, вам нужно будет отправить его индивидуально для каждого фрагмента, например:

dispatch(actionForSliceA());
dispatch(actionForSliceB());
dispatch(actionForSliceC());

Этот метод хорошо работает для небольшого количества срезов, но может стать громоздким по мере увеличения количества срезов.

Метод 2: использование промежуточного программного обеспечения
Другой подход — использовать промежуточное программное обеспечение Redux для перехвата и изменения отправленного действия до того, как оно достигнет редукторов. Вы можете создать собственное промежуточное программное обеспечение, которое обнаруживает общие действия и автоматически отправляет их всем срезам. Вот пример:

const commonActionMiddleware = store => next => action => {
  if (action.type === 'COMMON_ACTION') {
    const state = store.getState();
    const slices = ['sliceA', 'sliceB', 'sliceC'];

    slices.forEach(slice => {
      store.dispatch({ ...action, slice });
    });
  }

  return next(action);
};
// Apply the middleware to your Redux store
const store = createStore(rootReducer, applyMiddleware(commonActionMiddleware));

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

Метод 3: использование редуктора высшего порядка
Редуктор высшего порядка — это функция, которая принимает базовый редуктор и возвращает новый редуктор с дополнительными возможностями. В этом случае мы можем создать редуктор более высокого порядка, который перехватывает общие действия и применяет их к нескольким срезам. Вот пример:

const multiSliceReducer = (baseReducer, commonActionTypes, sliceNames) => {
  return (state, action) => {
    if (commonActionTypes.includes(action.type)) {
      sliceNames.forEach(slice => {
        state[slice] = baseReducer(state[slice], action);
      });
    }

    return baseReducer(state, action);
  };
};
// Usage:
const rootReducer = combineReducers({
  sliceA,
  sliceB,
  sliceC,
});
const commonActionTypes = ['COMMON_ACTION'];
const sliceNames = ['sliceA', 'sliceB', 'sliceC'];
const enhancedReducer = multiSliceReducer(rootReducer, commonActionTypes, sliceNames);
const store = createStore(enhancedReducer);

При применении multiSliceReducerк корневому редуктору любое отправленное общее действие будет применено ко всем указанным фрагментам.

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

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