Javascript Redux Reducer-正在调度但未保存到状态的对象数组

这是新的

我有一个操作，通过获取“GET”从ASP.NET核心API检索数据。它被发送到减速器。此时将调用reducer，当对象使其处于该位置时，状态不会更新。因此，该行动确实提供了有效载荷。减速器收到有效载荷，但状态未更新。为什么?

首先，我想知道我是否必须考虑到它们是对象数组的事实

viewModel中有两个数组对象和一个字符串值

此viewModel的结构如下所示：

AddressLocationDropdownViewModel=一个int Id和四个字符串值

StateViewModel=一个int-Id和两个字符串值

CompanyStateShortName=字符串

一旦检索到数据，我就可以查看Chrome上F12选项中的Redux工具。状态已更改操作显示有效负载，但有效负载未更新状态，即使其已收到

以下是收到的操作中每个列表的详细明细，显示在redux工具的操作选项卡中

两张图片显示了行动有效载荷，以及有效载荷对象阵列的分解

这是三个项目被圈起来的初始状态

在它通过减速器运行并完成后，这是完成状态，这些项目现在明显缺失

然而，上面的动作表明它收到了数据

下面是操作的代码。只有在通过调用“saveJwt（data）”将JWT保存到本地存储器中时，才会在接收到JWT后进行第二次提取

以下是减速器的代码：

// ******************* reducer
const initialState = {
  isLoading: false,
  isAuthorised: false,
  username: null,
  jwt: null,
  SuburbPostcodeDropDownList: null,
  StateDropDownList: null,
  CompanyStateShortName: null,
  error: null,
}

export default (state = initialState, action) => {
  switch (action.type) {
    case REQUEST_LOGIN_TOKEN:
      return {
        ...state,
        isLoading: true,
        isAuthorised: false,
        username: action.payload,
        jwt: null,
        error: null,
      }
    case RECEIVE_LOGIN_TOKEN:
      return {
        ...state,
        isLoading: false,
        isAuthorised: true,
        jwt: action.payload,
        error: null,
      }
    case ERROR_LOGIN_TOKEN:
      return {
        ...state,
        isLoading: false,
        isAuthorised: false,
        username: null,
        jwt: null,
        error: action.payload,
      }

    case REQUEST_SELECT_DATA:
      return {
        ...state,
        isLoading: true,
        isAuthorised: false,
        SuburbPostcodeDropDownList: null,
        StateDropDownList: null,
        CompanyStateShortName: null,
        error: null,
      }

    case RECEIVE_SELECT_DATA:
      return {
        ...state,
        isLoading: false,
        isAuthorised: true,
        SuburbPostcodeDropDownList: action.payload.SuburbPostcodeDropDownList,
        StateDropDownList: action.payload.StateDropDownList,
        CompanyStateShortName: action.payload.CompanyStateShortName,
        error: null,
      }

这是因为如果存在列表数组等，则该状态需要更多设置

---

如果是这样，您将如何构造减速机以处理数组对象？

您的问题很简单-减速机中的

action.payload

字段在

RECEIVE\u SELECT\u DATA

案例下的大小写不正确。它们以大写字母开头，而它们应该以小写字母开头

这意味着它们被解读为未定义的，这意味着当您使用对象扩展语法构建新状态对象时，它们根本不会添加到新对象中，这就是它们从状态中消失的原因

---

所有这些字段名称的第一个字母都小写，应该可以使用。

年轻玩家的技巧。。。如果我在这件事上花了好几个小时。。非常感谢！：）没问题-很高兴能帮上忙！：-）

// ******************* reducer
const initialState = {
  isLoading: false,
  isAuthorised: false,
  username: null,
  jwt: null,
  SuburbPostcodeDropDownList: null,
  StateDropDownList: null,
  CompanyStateShortName: null,
  error: null,
}

export default (state = initialState, action) => {
  switch (action.type) {
    case REQUEST_LOGIN_TOKEN:
      return {
        ...state,
        isLoading: true,
        isAuthorised: false,
        username: action.payload,
        jwt: null,
        error: null,
      }
    case RECEIVE_LOGIN_TOKEN:
      return {
        ...state,
        isLoading: false,
        isAuthorised: true,
        jwt: action.payload,
        error: null,
      }
    case ERROR_LOGIN_TOKEN:
      return {
        ...state,
        isLoading: false,
        isAuthorised: false,
        username: null,
        jwt: null,
        error: action.payload,
      }

    case REQUEST_SELECT_DATA:
      return {
        ...state,
        isLoading: true,
        isAuthorised: false,
        SuburbPostcodeDropDownList: null,
        StateDropDownList: null,
        CompanyStateShortName: null,
        error: null,
      }

    case RECEIVE_SELECT_DATA:
      return {
        ...state,
        isLoading: false,
        isAuthorised: true,
        SuburbPostcodeDropDownList: action.payload.SuburbPostcodeDropDownList,
        StateDropDownList: action.payload.StateDropDownList,
        CompanyStateShortName: action.payload.CompanyStateShortName,
        error: null,
      }