Question

我正在尝试“ 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}

我不知道哪里是最好的处理方法：动作创建者，减速器等。我不应该检查有效载荷是否在减速器中，否则，请返回状态或什么也不做。我想了解哪种方法是处理此问题的最佳方法。

Answer 1

您可能会看到source的redux-promise，因为它非常简单。

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返回的诺言的解决，并分派您的操作，但payload被诺言结果代替。如果发生错误，redux-promise将捕获它并使用error = true调度动作（您可能要在化简器中处理action.error === true的情况）

Answer 2

在化简器中，您应该检查操作中是否存在错误字段：

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

Answer 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,
      };

使用Redux-Promise处理Redux中错误的正确方法

3 个答案: