使用单个操作修改多个值或针对每个值执行一个操作的利弊是什么？为什么？

Question

我正在尝试找到管理减速机的最佳模式。

我有以下页面：

我知道我可以使用redux-forms，但这并不是重点，因为我仅以这些字段/表单为例。

我们在Redux上有多种处理方式：

• 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;
  }
};