javascript - ReduxReducer - 正在调度但未保存到状态的对象数组

Question

这是新的。

我有一个通过 Fetch“GET”从 ASP.NET Core API 检索数据的操作。它被发送到 reducer 。调用 reducer ，此时，虽然对象使其到达那里，但状态并未更新。所以这个 Action 确实传递了有效负载。 reducer 收到有效负载，但状态未更新。为什么？

一开始我想知道我是否必须适应它们是对象数组的事实。

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

这个viewModel的结构如下:

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

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

CompanyStateShortName = 字符串。

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

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

两张图片显示了操作有效负载以及有效负载对象数组的分割。

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

在它运行并完成 reducer 之后，这是完成的状态，这些项目现在显然丢失了。

但是上面的操作表明它收到了数据。

这是该操作的代码第二次获取仅在收到 JWT 之后发生，因为它通过调用“saveJwt(data)”保存到本地存储中

export const requestLoginToken = (username, password) =>
  (dispatch, getState) => {
    dispatch({ type: REQUEST_LOGIN_TOKEN, payload: username })

    const payload = {
      userName: username,
      password: password,
    }

    const task = fetch('/api/jwt', {
      method: 'POST',
      body: JSON.stringify(payload),
      headers: {
        'Content-Type': 'application/json;charset=UTF-8'
      },
    })
      .then(handleErrors)
      .then(response => response.json())
      .then(data => {
        dispatch({ type: RECEIVE_LOGIN_TOKEN, payload: data })
        saveJwt(data)

        //selectData
        dispatch({ type: REQUEST_SELECT_DATA })

        const token = getJwt()
        const headers = new Headers({
          'Authorization': `Bearer ${token}`
        })
        const retrieveSelectData = fetch('/api/SelectData/SelectData', {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json;charset=UTF-8'
          },
        })
          .then(handleErrors)
          .then(response => response.json())
          .then(selectData => {
            dispatch({ type: RECEIVE_SELECT_DATA, payload: selectData })
          })

      })
      .catch(error => {
        clearJwt()
        dispatch({ type: ERROR_LOGIN_TOKEN, payload: error.message })
      })
    addTask(task)
    return task
  }

这是 reducer 的代码:

// ******************* 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,
      }

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

如果是这样，您将如何构造 reducer 来处理数组对象？

Answer 1

您的问题很简单 - 在 RECEIVE_SELECT_DATA 情况下，action.payload 上的字段在您的化简器中没有正确大小写。它们以大写字母开头，而本应以小写字母开头。

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

小写所有这些字段名称的第一个字母，它应该可以工作。