Redux状态正在变得不确定

Question

当我通过Redux获取数据并使用异步等待重写我的承诺时，我尝试添加一个加载屏幕，但是当我在state我的数据中记录mapStateToProps时它不是很好未定义：

但我可以看到：

我不知道为什么我可以在那里看到我的数据，但在尝试通过mapStateToProps访问时却不知道。

以下是一些代码：

动作：

const setDoors = data => {
  return {
    type: 'FETCH_DOORS_SUCCESS',
    payload: {
      setDoors: data
    }
  }
}

const setControllers = data => {
  return {
    type: 'FETCH_CONTROLLERS_SUCCESS',
    payload: {
      setControllers: data
    }
  }
}

export const fetchDoors = () => async dispatch => {
  try {
    dispatch({ type: 'FETCH_DOORS' })
    const doors = await axios.get(`${settings.hostname}/locks`)
    dispatch({ type: 'FETCH_DOORS_SUCCESS', payload: doors.data })

    dispatch({ type: 'FETCH_CONTROLLERS' })
    const controllers = await axios.get(`${settings.hostname}/controllers`)
    dispatch({ type: 'FETCH_CONTROLLERS_SUCCESS', payload: controllers.data })
  } catch (err) {
    throw new Error(err)
  }
}

减速机：

const initialState = {
  isLoading: false
}

export const fetchDoors = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DOORS':
      return { ...state, isLoading: true }

    case 'FETCH_DOORS_SUCCESS':
      return { ...state, doors: action.payload.setDoors, isLoading: false }

    case 'FETCH_CONTROLLERS':
      return { ...state, isLoading: true }

    case 'FETCH_CONTROLLERS_SUCCESS':
      return {
        ...state,
        controllers: action.payload.setControllers,
        isLoading: true
      }

    default:
      return state
  }
}

我想向您展示我的商店，因为我正在使用autoRehydrate和persistStore。

存储

const enhancer = compose(
  autoRehydrate(),
  applyMiddleware(...middlewares),
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
)

const store = createStore(rootReducers, {}, enhancer)
persistStore(store)

export default store

问题：

所以我想知道如何停止在任何地方取消定义并继续使用我的应用程序。我非常感谢能得到的所有帮助。

谢谢！

更新

在@jonahe（感谢我的朋友）建议后，我已将我的代码更新为：

dispatch({ type: 'FETCH_DOORS' })
const doors = await axios.get(`${settings.hostname}/locks`)
dispatch(setDoors(doors.data), { type: 'FETCH_DOORS_SUCCESS' }) // changed this line

但是现在当我记录state时，我没有得到任何定义，但是这个（data object）： 然后是一个错误，因为我的道具与我的.filter，.map等一起布局，并且在错误之后我看到了这个（没有data对象）：

Answer 1

FETCH_DOORS_SUCCESS的缩减器取决于payload.setDoors属性。该属性确实存在于您定义的动作创建函数中：

const setDoors = data => {
  return {
    type: 'FETCH_DOORS_SUCCESS',
    payload: {
      setDoors: data
    }
  }
}

但你没有使用那个动作创作者。您将使用以下代码发送FETCH_DOORS_SUCCESS：

dispatch({ type: 'FETCH_DOORS_SUCCESS', payload: doors.data })

您也可以在调度操作的屏幕截图中看到这一点。数据为payload，但有效负载没有预期的结构。 Payload是一个数组，但reducer期望有效负载是一个.setDoors属性的对象。

（FETCH_CONTROLLERS_SUCCESS）似乎存在类似的问题。