javascript - React Redux 调度有效负载到达带有数据的情况，但不保存它

Question

在我的 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,
        jwt: action.payload,
        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
      }

它通过有效负载到达 RECEIVE_LOGIN_TOKEN。其中两项是数组。这是它使用数据达到正确案例选项的图片。

当它完成时，我查看 Chrome 中的 redux 扩展，它尚未更新状态。

我不明白为什么它没有更新状态？我已将返回数据的名称设置为状态名称等，但它不会从初始状态更改，甚至不会注册它们存在于树的登录部分中。

想知道我做错了什么吗？

编辑

按照此处的要求，执行调度的代码:

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,
        })
          .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
  }

它通过retrieveSelectData获取数据...

Answer 1

当访问reducer中的有效负载时，您将第一个字母大写，而它应该是小写，所以

SuburbPostcodeDropDownList: action.payload.suburbPostcodeDropDownList

而不是:

SuburbPostcodeDropDownList: action.payload.SuburbPostcodeDropDownList