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

Posted 2023-02-22

【中文标题】使用 redux-promise 处理 redux 错误的正确方法

【英文标题】：Proper way to handle errors in redux using redux-promise

【发布时间】：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 中，如果不是，则返回状态或什么都不做。我想了解哪种方法是处理此问题的最佳方法。

【参考方案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,
      ;