javascript - 通过 Redux 获取数据时加载屏幕

Question

当我从我的 API 获取数据时，我想开始向我的组件添加加载屏幕。我做了一些研究并尽了最大努力，但我的加载屏幕从未消失，我也不知道为什么。我已经尝试解决这个问题了一段时间，呵呵。

Action :

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

...

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

reducer :

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 }

在我的组件中我只有这个:

if (this.props.isLoading) return <div>laddar</div>

当我记录它时，我总是得到正确的结果:

const mapStateToProps = state => {
  console.log(state.fetchDoors.isLoading) // Always true
  return {
    doors: state.fetchDoors.doors,
    isLoading: state.fetchDoors.isLoading,
    controllers: state.fetchDoors.controllers
  }
}

控制台

Answer 1

你有一个棘手的小错误，你没有等待你认为你正在等待的东西。

比较一下

const doors = await axios.get(`${settings.hostname}/locks`).data

到

const doors = (await axios.get(`${settings.hostname}/locks`)).data

在第一种情况下，您实际上正在等待从 axios 调用返回的一些未定义的属性 .data promise(不是等待的结果)。

在第二种情况下，您正在等待 promise ，然后您将获得等待 promise 的 .data 属性，这应该可行。

我在下面的小片段中重现了这个问题。请注意第一个结果弹出的速度有多快，即使 promise 应该在 4 秒后解决。

const getDataPromise = () => new Promise(resolve => setTimeout(() => resolve({data: 42}), 4000));

(async function e() {
  const data = await getDataPromise().data;
  
  console.log("wrong:   await getDataPromise().data = ", data)

})();

(async function e() {
  const data = (await getDataPromise()).data;
  
  console.log("right:   (await getDataPromise()).data = ", data)

})();