Как отфильтровать действия Redux?

Question

Можно ли добавить дополнительную информацию к действию, чтобы компонентные редукторы (и sagas / любые побочные эффекты, которые вы используете) могли их фильтровать?

Пример:

function reducerComponentA(state, action) {
  switch (action.type) {
    case START_FETCH:
      return {
        ...state,
        isLoading: true,
      };
      break;

    case START_FETCH_SUCCESS:
      return {
        ...state,
        isLoading: false,
      };
      break;
  }

  return state;
}

и

function reducerComponentB(state, action) {
  switch (action.type) {
    case START_FETCH:
      return {
        ...state,
        isLoading: true,
      };
      break;

    case START_FETCH_SUCCESS:
      return {
        ...state,
        isLoading: false,
      };
      break;
  }

  return state;
}

Обратите внимание, как оба редуктора наблюдают одно и то же действие и действуют на них (покажите анимацию загрузки).Теперь, если экран / компонент, с которым связаны эти редукторы, находятся в памяти, START_FETCH заставит их обоих показать анимацию загрузки, возможно, даже перекрывающуюся (потому что она глобальная).Является ли фильтрация действий по экрану / компоненту хорошим решением?

Примерно так:

function reducerComponentA(state, action) {
  if (action.currentScreen === 'ScreenA') {
    switch (action.type) {
      ...
    }
  }

  return state;
} 

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

Answer 1

Вы можете «монтировать» редуктор к различным слоям состояния.Для этого вы можете добавить path к действию, а в редукторе обновить соответствующий фрагмент состояния.

Это может быть похоже на:

function reducer(state, action) {
  if (action.type === '...') {
    return _.set(_.deepClone(state), `${action.path}.isLoading`, false)
  } else return state;
}

Другими словами, action определяет, с какой частью редуктора состояний будет работать.

Обратите внимание, что приведенный выше пример крайне неэффективен и предназначен только для демонстрационных целей.Вместо клонирования состояния следует использовать некоторые помощники неизменяемости: Колодный / помощник неизменности , mweststrate / immer , прочее.

UPD

Представьте, что у вас есть действие и редуктор для состояния ввода:

const UPDATE_VALUE = 'UPDATE_VALUE';
const updateValue = (value) => ({ type: UPDATE_VALUE, value })

function reducer(state, action) {
  if (action.type === UPDATE_VALUE) {
    return { ...state, input: action.value }
  } else return state;
}

И вы хотите использовать это действие / редуктор для множества различных входов.Действие может быть снабжено путем к свойству, который указывает, какая часть или состояние должно быть обновлено, и, в конечном счете, какие входные данные будут получать новые реквизиты:

const UPDATE_VALUE = 'UPDATE_VALUE';
const updateValue = (value, path) => ({ type: UPDATE_VALUE, value, path })

function reducer(state, action) {
  if (action.type === UPDATE_VALUE) {
    return { ...state, [action.path]: action.value }
  } else return state;
}

Это можно использовать затем:

dispatch(updateValue(event.target.value, 'firstNameInput'))
dispatch(updateValue('Doe', 'lastNameInput'))

Код в начале ответа является общей версией последнего.