redux 中的状态解构问题

Question

总结

我正在重写redux状态，解构子树，但之后部分状态丢失了

项目信息

对我的 react 项目的依赖：

• react-redux": "^6.0.1"
• redux": "4.0.1"
• redux-thunk": "2.3.0"
• ...

代码

初始状态：

const initialState = {
  fetching: false,
  data: {
    events: null,
    issues: null,
    sla: {
      daily: null,
      weekly: null,
    },
    lastUpdate: null,
  },
  error: null,
};

reducer 的一部分丢失数据：

case types.FETCH_DATA.SUCCESS:
  return {
    ...state,
    data: {
      ...state.data,
      sla: {
        ...state.data.sla,
        ...payload.data.sla,
      },
      ...payload.data,
    },
    fetching: false,
    error: null,
  };

按动作发送的数据：

{
  events: ["event 1", "event 2"],
  issues: ["issue 1", "issue 2"],
  sla: {
    daily: ["daily 1", "daily 2"],
}

动作调度后的状态：

{
  fetching: false,
  data: {
    events: ["event 1", "event 2"],
    issues: ["issue 1", "issue 2"],
    sla: {
      daily: ["daily 1", "daily 2"],
    },
    lastUpdate: null,
  },
  error: null,
}

data.sla.weekly 丢失

如果我不发送关于操作的问题：

{
  events: ["event 1", "event 2"],
  sla: {
    daily: ["daily 1", "daily 2"],
}

动作调度后的状态：

{
  fetching: false,
  data: {
    events: ["event 1", "event 2"],
    issues: null,
    sla: {
      daily: ["daily 1", "daily 2"],
    },
    lastUpdate: null,
  },
  error: null,
}

在这种情况下 ...state.data 解构运行良好，但 ...state.data.sla 不行

请有人帮助我！！！

Answer 1

解构按预期工作，但您的顺序应该改变

case types.FETCH_DATA.SUCCESS:
  return {
    ...state,
    data: {
      ...state.data,
      sla: {
        ...state.data.sla,
        ...payload.data.sla,
      },
      ...payload.data, <---- This is overriding the previous `sla` but the action contains `sla.daily` only, that's why your `sla.weekly` is gone
    },
    fetching: false,
    error: null,
  };

尝试改变顺序

case types.FETCH_DATA.SUCCESS:
  return {
    ...state,
    data: {
      ...state.data,
      ...payload.data, <-- Move up before `sla`
      sla: {
        ...state.data.sla,
        ...payload.data.sla,
      },
    },
    fetching: false,
    error: null,
  };

但是你的状态似乎很复杂，如果可能的话，简化它会让你的生活更轻松......