使用 redux-promise 处理 redux 错误的正确方法答案

【问题标题】：Proper way to handle errors in redux using redux-promise使用 redux-promise 处理 redux 错误的正确方法
【发布时间】：2019-10-20 10:13:00
【问题描述】：

我正在尝试“redux-promise”。当流程中没有错误时，我的代码可以正常工作。但是，假设 API 已关闭，或者我的 URL 中有错字。在这些情况下，我希望以正确的方式处理错误。

这是API：https://jsonplaceholder.typicode.com/users （在 sn-p 中，我在末尾添加随机文本以生成 404）

动作创建者

export async function fetchUsers() {

  const request = await axios
    .get('https://jsonplaceholder.typicode.com/userssdfdsfdsf')
    .catch(error => console.log('ERROR', error))

  return {
    type: FETCHING_USERS,
    payload: request
  };
}

减速器

export default (state = [], action) => {
  switch (action.type) {
    case FETCHING_USERS:
      return [...state, ...action.payload.data]

    default:
      return state
  }
}

我可以看到控制台中记录的错误

ERROR Error: Request failed with status code 404

但是，一旦动作被分派，它的有效载荷是undefined

action {type: "FETCHING_USERS", payload: undefined}

我不知道处理这个问题的最佳位置在哪里：动作创建器、reducer 等。我不应该检查有效负载是否在 reducer 中，如果不是，则返回状态或什么都不做。我想了解哪种方法是处理此问题的最佳方法。

【问题讨论】：

标签： redux redux-promise

【解决方案1】：

你可以看看redux-promise的source，很简单。

Redux-promise 期望 promise 或将有效负载设置为某个 promise 的操作。我想你会使用字母大小写。

代码可能看起来像（只是示例，未经测试）：

export function fetchUsers() {

    const request = axios.get('https://jsonplaceholder.typicode.com/userssdfdsfdsf');

    return {
        type: FETCHING_USERS,
        payload: request
    };
}

在这种情况下，redux-promise 将等待 axios.get 返回的 promise 的解析并调度您的操作，但 payload 替换为 promise 结果。如果出现错误，redux-promise 将捕获它并使用 error = true 调度操作（您可能希望在 reducer 中处理 action.error === true 情况）

【讨论】：

【解决方案2】：

在reducer中你应该检查错误字段的存在：

export default function(state = null, action) {
  if (action.error) {
    //handle
  }  
  switch(action.type) {

【讨论】：

【解决方案3】：

此代码用于操作。

export const fetchUsers = () => async dispatch => { try { const res = await axios.get('https://jsonplaceholder.typicode.com/userssdfdsfdsf'); dispatch({ type: FETCHING_USERS, payload: res.data }); } catch (err) { dispatch({ type: FETCHING_ERROR }); } };

在减速器中这样做。定义初始状态并使用此代码。

export default function(state = initialState, action) {
  const { type, payload } = action;

  switch (type) {
    case FETCHING_USERS:
      return {
        ...state,
        loading: false,
        user: payload,

      };
case FETCH_ERROR:
      return {
        ...state,
        token: null,
        loading: false,
      };

【讨论】：