时间戳

首页 > 解决方案 > 使用 redux-promise 处理 redux 错误的正确方法

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

问题描述

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

这是API：https ://jsonplaceholder.typicode.com/users （在片段中我在最后添加随机文本以生成 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 中，如果不是，则返回状态或什么都不做。我想了解哪种方法是处理此问题的最佳方法。

标签： reduxredux-promise

解决方案

您可以查看 redux-promise 的来源，因为它非常简单。

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

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

export function fetchUsers() {

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

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

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

推荐阅读