Как я могу объединить эти два редукционных действия в одно?

Question

У меня есть два поля формы a и b. Мне нужно отправить общее действие для обоих случаев, но я должен соответствующим образом обновить магазин.

switch (action.type) {
    case actions.ONINIT_a:
      return {
        ...state,
        parent: {
          ...state.parent,
          a: {
            ...state.parent.a,
            ...action.data
          }
        }
      };
    case actions.ONINIT_b:
      return {
        ...state,
        parent: {
          ...state.parent,
          b: {
            ...state.parent.b,
            ...action.data
          }
        }
      };
    default:
      return state;
  }
};

Answer 1

Если вы создаете более общее действие, которое отправляет родительский элемент как часть действия

const initParent = (data, parent) => ({
  type: ON_INIT,
  data,
  parent
});

, то вы можете обобщить редуктор

switch (action.type) {
  case actions.ON_INIT:
    return {
      ...state,
      parent: {
        ...state.parent,
        [action.parent]: {
          ...state.parent[action.parent],
          ...action.data,
        }
      }
    };

    default:
      return state;
    }
};

DEMO

const actions = {
  ON_INIT: 'ON_INIT',
};

const initParent = (data, parent) => ({
  type: actions.ON_INIT,
  data,
  parent
});

const initialState = {
  parent: {},
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case actions.ON_INIT:
      return {
        ...state,
        parent: {
          ...state.parent,
          [action.parent]: {
            ...state.parent[action.parent],
            ...action.data,
          }
        }
      };

    default:
      return state;
  }
};

let nextState;

nextState = reducer(initialState, initParent({ test: "data - a" }, "a"));
console.log("Update 1:", nextState);

nextState = reducer(nextState, initParent({ test: "data - b" }, "b"));
console.log("Update 2:", nextState);

nextState = reducer(nextState, initParent({ test: "new data - a" }, "a"));
console.log("Update 3:", nextState);

Answer 2

Вы можете использовать response-batch-middleware и отправлять сразу несколько действий следующим образом:

dispatch([{ type: actions.ONINIT_a }, { type: actions.ONINIT_b }])

Или написать свое промежуточное промежуточное ПО для достижения того же результата.