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

Question

我想从我的API中获取数据时，开始向我的组件添加加载屏幕。我做了一些研究并尽我所能，但我的加载屏幕永远不会消失，我不知道为什么。我试图解决这个问题一段时间后嘿嘿。

动作：

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))

减速机：

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调用返回的promise （未等待的结果）上的某些未定义属性.data 。

在第二种情况下，它应该有效，你等待承诺，然后你得到等待承诺的.data财产。

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

＆＃13;

＆＃13;

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)

})();

＆＃13;

＆＃13;

＆＃13;

Answer 2

dispatch(setDoors(doors))应为dispatch(fetchDoorsSucess(doors))，并且只应在成功拨打axios时调用。

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

通常，我对每个ajax调用都有三个标准操作，REQUEST，REQUEST_SUCCESS和REQUEST_ERROR。在REQUEST的reducer中，您应该设置isLoading:true，对于其他两个，您应该设置isLoading: false并减少从服务器返回的所有数据。