Question

在过去的几周里，我一直在与redux一起工作，当我碰到这堵墙时，我将它并入了我的项目中。用于模态渲染的相当常见的reducer，因此我可以在卸载它们之前对其进行动画处理。

const initialState = {
  isModalOpen: false,
  test: false
}
export default function(state = initialState, action) {
  switch (action.type) {
    case "modalInteraction":
      return {
        isModalOpen: action.payload
      };
    case "testModalInteraction":
      return {
        test: action.payload
      };
    default:
      return state;
  };
}

可悲的是，尽管可以调用同一reducer中的另一个初始状态而没有问题，但test属性仍然返回未定义状态。在某种程度上破坏数据类型的情况下，我什至删除了所有testModalInteraction分派。我只是无法发现不断返回未定义的差异。

Answer 1

返回新状态时，请确保扩展初始状态（...state），然后更改需要更改的任何值。

const initialState = {
  isModalOpen: false,
  test: false
}
export default function(state = initialState, action) {
  switch (action.type) {
    case "modalInteraction":
      return {
        ...state,
        isModalOpen: action.payload
      };
    case "testModalInteraction":
      return {
        ...state,
        test: action.payload
      };
    default:
      return state;
  };
}

如果仍然未定义，请确保为两个操作都定义了有效负载。例如，您的modalInteraction动作看起来像

export const modalInteraction = (bool) => ({
  type: "modalInteraction",
  payload: bool
})

P.S。，您可以破坏动作对象。这样，您可以使用“类型”代替“ action.type”，并使用“有效载荷”代替“ action.payload”。

const initialState = {
  isModalOpen: false,
  test: false
}
export default function(state = initialState, action) {
  const {type, payload} = action;
  switch (type) {
    case "modalInteraction":
      return {
        ...state,
        isModalOpen: payload
      };
    case "testModalInteraction":
      return {
        ...state,
        test: payload
      };
    default:
      return state;
  };
}

Reducer的初始状态中有两个布尔状态，一个返回未定义

1 个答案: