Reactjs 在Reducer的Init状态中有两个布尔状态，一个返回undefined

在过去的几周里，我一直在与redux合作，当我遇到这堵墙时，我正在将它整合到我的项目中。对于渲染的模态来说，这是非常常见的缩减器，所以我可以在卸载它们之前对它们进行动画处理

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调度，以防它以某种方式破坏数据类型。我无法发现返回未定义状态的差异。

返回新状态时，请确保分散初始状态（

…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
})

另外，你可以解构动作对象。这允许您使用“类型”而不是“action.type”，使用“负载”而不是“action.payload”

---

返回新状态时，请确保分散初始状态（

…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
})

另外，你可以解构动作对象。这允许您使用“类型”而不是“action.type”，使用“负载”而不是“action.payload”

---

在每个分支中，您不包括其他属性。这可以通过非常常见的不可变模式来解决。你能为模态交互分支尝试

返回{…state，isModalOpen:action.payload}

吗？我有，但它仍然返回为未定义。你需要在每个分支中使用spread，而不是default，以确保不擦除属性。在每个分支中，你排除了其他属性。这可以通过非常常见的不可变模式来解决。你能为模态交互分支尝试

返回{…state，isModalOpen:action.payload}

吗？我有，但它仍然返回为未定义。你需要在每个分支中使用spread，而不是default，以确保不擦除属性。