显示新内容之前的加载状态

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. 新状态(显示(