使用Redux和等待/异步语法分派多个操作以跟踪加载
使用Redux和等待/异步语法分派多个操作以跟踪加载
提问于 2018-03-31 10:28:01
我目前正在编辑一些还原器，以便能够跟踪axios操作的加载状态。我的大部分异步语法都是以异步/等待方式编写的，并且希望保持这种方式来保持代码的组织性。
我不知道如何一个接一个地分派两个动作创建者:第一个用来触发FETCHING_USER动作类型并跟踪简化的isFetching状态，而另一个用来触发实际的axios GET请求。当前的代码如下所示，以获取API请求：
export const fetchUser = () => async dispatch => {
const res = await axios.get(`${API_URL}/api/current_user`, {
headers: { authorization: localStorage.getItem("token") }
});
dispatch({ type: FETCH_USER, payload: res.data });
};我不知道如何调度FETCHING_USER，然后启动FETCH_USER操作。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-03-31 10:37:01
首先，需要修改还原器，使其具有isFetching语句，并请求和接收数据情况：
const INITIAL_STATE = { isFetching: false, data: [] };
export default(state = INITIAL_STATE, action) => {
switch(action.type) {
case REQUEST_USER: {
return {...state, isFetching: true};
}
case RECEIVE_USER: {
return {...state, isFetching: false, data: action.payload};
}
default: return state;
}
}然后修改您的操作以使用try/catch语句：
export const fetchUser = () => async dispatch => {
dispatch({ type: REQUEST_USER });
try {
const res = await axios.get(`${API_URL}/api/current_user`, {
headers: { authorization: localStorage.getItem("token") }
});
dispatch({ type: RECEIVE_USER, payload: res.data });
}
catch(e){
//dispatch your error actions types, (notifications, etc...)
}}；
然后，在组件中可以使用如下条件: isFetching ?//显示加载程序://显示内容(data[])
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49591051
复制相关文章
相似问题
腾讯云开发者
