使用 Redux Thunk 和 await/async 语法调度多个操作以跟踪加载答案

【问题标题】：Dispatch multiple actions using Redux Thunk and the await/async syntax to track loading使用 Redux Thunk 和 await/async 语法调度多个操作以跟踪加载
【发布时间】：2018-09-10 11:26:08
【问题描述】：

我目前正在编辑一些 reducer，以便能够跟踪 axios 操作的加载状态。我的大部分异步语法都是以 async/await 方式编写的，并且希望保持这种方式以保持我的代码井井有条。

我不确定如何依次调度两个动作创建者：第一个触发 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 操作。

【问题讨论】：

标签： reactjs redux redux-thunk

【解决方案1】：

首先你需要修改你的reducer以拥有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 ? //显示加载器：//显示内容（数据[]）

【讨论】：