reactjs - 显示新内容前的加载状态

Question

我正在尝试使用 react 和 redux 实现乐观的 UI 加载。这是我的减速机：

const initState = {
  user: {},
  loading: true,
};

export default function (state = initState, action) {
  switch (action.type) {
   
    case GET_CURRENT_USER_BY_PROFILEID_LOADING:
      return {
        ...state,
        loading: true,
      };
    case GET_CURRENT_USER_BY_PROFILEID:
      return {
        ...state, 
        loading: false,
        user: action.payload.item,
      };

    default:
      return state;
  }
}

这是动作创建者：

export const getCurrentUserByProfileId = (profileId) => {
  return (dispatch) => {
    dispatch({ type: GET_CURRENT_USER_BY_PROFILEID_LOADING });
    baseUrl
      .get(
        Constants.RELATIVEPATH +
          Constants.USERS +
          '/' +
          profileId +
          Constants.PROFILEID,
        { headers }
      )
      .then((response) => {
        const data = response.data;
        dispatch({
          type: GET_CURRENT_USER_BY_PROFILEID,
          payload: { item: data },
        });
      })
      .catch((error) => {
        console.log(error);
        onError(error);
      });
  };
};

理想的情况是：Loading --> New state我只在第一次加载时得到这个，之后是：Flash of old state --> Loading --> New state

Answer 1

在向用户显示组件之前，您可以在不同的函数中调度GET_CURRENT_USER_BY_PROFILEID_LOADING 。

这样你就会有：

1. 旧状态（未显示）
2. GET_CURRENT_USER_BY_PROFILEID_LOADING
3. 导航，或任何你做的显示组件
4. 加载（显示）
5. GET_CURRENT_USER_BY_PROFILEID
6. 新状态（显示）