Reducer Init State 中的两个布尔状态，一个返回 undefined答案

【问题标题】：Two Boolean states in the Init State of Reducer, One returns undefinedReducer Init State 中的两个布尔状态，一个返回 undefined
【发布时间】：2020-07-18 12:56:51
【问题描述】：

过去几周我一直在使用 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 调度，以防它以某种方式扰乱数据类型。我只是无法发现不断返回未定义的差异。

【问题讨论】：

在每个分支中，您都排除了其他属性。这可以通过非常常见的不可变模式来解决。模态交互分支可以试试return { ...state, isModalOpen: action.payload }吗？
我有，但它仍然返回未定义。
你需要在每个分支中使用spread，而不是默认的，以确保你不会删除属性。

标签： reactjs redux

【解决方案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.，您可以解构操作对象。这允许您使用“type”而不是“action.type”和“payload”而不是“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;
  };
}

【讨论】：