还原器完成后，状态中的 redux 数组未定义答案

【问题标题】：redux Array in state got undefined after reducer finish还原器完成后，状态中的 redux 数组未定义
【发布时间】：2019-11-09 02:43:59
【问题描述】：

我正在开发一个使用 react-redux 作为前端的项目。我已经解决了一个问题，但我不知道为什么。谁能给我个主意？

问题是，我在下面初始化我的“guidelineManagement”状态（它在 guidelineManagement.js 中）：

    const init = {
      page: 'GuidelineTableComponent',
      status: null,
      msg: [],
      error: null,
      guidelineData: [],
      data: []
    }

我还有另一个 reducer 处理登录状态，它在'login.js'中。我使用combineReducers 来组合两个reducer。

现在，在每个页面加载时，我都会执行一个操作“fetchLoginStatus”，它从服务器加载登录状态，并在login.js 中加载reducer 句柄，

所以，在guidelineManagement reducer 中，它将执行默认情况。

我的表演是这样的

default:
  console.log({...state})
  return {...state}

但是当我在“fetchLoginStatus”完成后检查记录器时，状态变为以下：

fetchLoginStatus之前：

guidelineManagement:
    data: Array []
    error: null
    guidelineData: Array []
    msg: Array []
    page: "GuidelineTableComponent"
    status: null
    <prototype>: Object { … }

但是在fetchLoginStatus完成之后：

guidelineManagement: 
    data: Array []
    error: null
    guidelineData: Array(3) [ {…}, {…}, {…} ]
    msg: undefined
    page: "GuidelineTableComponent"
    status: "success"
    <prototype>: Object { … }

guidelineManagement.msg 变得未定义。

如果我将默认大小写更改为以下，它会正常工作

default:
  console.log({...state})
  return state

fetchLoginStatus 动作后的结果变成：

guidelineManagement: 
    data: Array []
    error: null
    guidelineData: Array(3) [ {…}, {…}, {…} ]
    msg: Array []
    page: "GuidelineInsertComponent" 
    status: "success"
    <prototype>: Object { … }

结果是对的，msg 保持为空数组。

顺便说一句，console.log 在默认情况下表示在用例块中， msg为空数组，表示返回前msg正确。

顺便说一句，在登录状态下，也有一个 msg 数组，在我的设计中，state.msg 用于接收服务器响应。

我注意到只有味精会导致这个问题。 state.guidelineManagement.data 和 state.guidelineManagement.guidelineData 两者也是数组，并且在动作完成之前它们保持相同的状态。

知道是什么导致了这个问题吗？

【问题讨论】：

顺便说一下，checkLoginStatus 动作之前和之后的guidelineData 更新是因为我调用了其他动作来进行ajax 调用。并且在 ajax 完成后，reducer 处理 AJAX_COMPLETE 操作不会影响 msg
我使用thunkmiddleware来包装ajax调用
您不应该在默认情况下使用return {...state}，即使没有更改，这也会不必要地使许多组件重新渲染。返回未修改的状态对象。请在相关的 reducer 操作中发布您正在执行的操作，并从您的代码 sn-ps 中删除多余的行以使其更易于阅读。
@Dominic 好的，谢谢，当我尝试解决这个错误时，我只是注意到这一点不同......

标签： javascript node.js reactjs react-redux

【解决方案1】：

好的，经过数小时的搜索和调试，我想通了，

这与return {...state}、return state 无关也没有关于不同减速器中的许多味精（login 和 guidelineManagement）

当我创建一个处理ajax数据的动作，并通知react重新渲染页面时，这只是一个小错误：

export const refreshGuideline = (status, data, msg) => ({
  type:types.GUIDELINE_REFRESH_GUIDELINE_DATA,
  status,
  data
})

在减速机中：

    case types.GUIDELINE_REFRESH_GUIDELINE_DATA:
      state.guidelineData = action.data
      state.status = action.status
      state.msg = action.msg
      return {...state}

action.msg 未定义，因此 state.guidelineManagement.msg 更改为 undefined...

更改下面的操作后，一切正常。

export const refreshGuideline = (status, data, msg) => ({
  type:types.GUIDELINE_REFRESH_GUIDELINE_DATA,
  status,
  data,
  msg
})

哦，即使 fetchLoginStatus 没有更改msg，fetchLoginStatus 操作之前和之后的记录器日志以及 guidelineManagement.msg 不同的原因只是因为 refreshGuideline 在 ajax 调用之后被调用，并且它是异步的.....

我只是整天搜索并体验对象分配和数组分配的工作原理......

【讨论】：