Каковы преимущества и недостатки использования одного действия для изменения нескольких значений или действия для каждого значения?Зачем?

Question

Я пытаюсь найти лучший способ управления моими редукторами.

У меня есть следующая страница:

Я знаю, что мог бы использовать для этого редукс-формы, но это не такДело в том, что я использовал эти поля / форму только в качестве примера.

У нас есть несколько способов справиться с этим на редуксе:

• 1: наличие одного действия для обновления значений этих полейна основе свойства name ввода:

const UPDATE_VALUES = 'UPDATE_VALUES';

const INITIAL_STATE = {
  aString: '',
  setOfValues1: [],
  setOfValues2: []
};

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case UPDATE_VALUES: {
      if (action.name === 'setOfValues1' || action.name === 'setOfValues2') {
        const array = [...state[action.name]];
        array.push(action.value);
        return {
          ...state,
          [action.name]: array
        };
      }

      return {
        ...state,
        [action.name]: action.value
      };
    }
    default:
      return state;
  }
};

• 2: наличие нескольких действий для каждого значения поля:

const UPDATE_A_STRING = 'UPDATE_A_STRING';
const UPDATE_SET_1 = 'UPDATE_SET_1';
const UPDATE_SET_2 = 'UPDATE_SET_2';

const INITIAL_STATE = {
  aString: '',
  setOfValues1: [],
  setOfValues2: []
};

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case UPDATE_A_STRING:
      return {
        ...state,
        aString: action.value
      };
    case UPDATE_SET_1: {
      const array = [...state.setOfValues1];
      array.push(action.value);
      return {
        ...state,
        setOfValues1: array
      };
    }
    case UPDATE_SET_2: {
      const array = [...state.setOfValues2];
      array.push(action.value);
      return {
        ...state,
        setOfValues2: array
      };
    }
    default:
      return state;
  }
};

• ибольше способов, о которых я не знаю.

, что будет хорошей практикой / лучшим примером в этом случае?Где я могу искать, чтобы узнать больше моделей для таких ситуаций, как эти и другие ситуации?

Answer 1

Как насчет этого?

const UPDATE_VALUES = 'UPDATE_VALUES';

const INITIAL_STATE = {
  aString: '',
  setOfValues1: [],
  setOfValues2: []
};

const setOfValues = ['setOfValues1', 'setOfValues2'];

const reducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case UPDATE_VALUES: {
      if (setOfValues.includes(action.name)) {
        return {
          ...state,
          [action.name]: state[action.name].concat(action.value);
        };
      }

      return {
        ...state,
        [action.name]: action.value
      };
    }
    default:
      return state;
  }
};