0

我正在尝试“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 中，如果不是，则返回状态或什么都不做。我想了解哪种方法是处理此问题的最佳方法。

4

3 回答 3

0

您可以查看 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 中处理大小写）

于 2019-06-05T08:58:44.410 回答
0

此代码用于操作。

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,
      };
于 2019-10-03T06:17:08.740 回答
0

在 reducer 中，您应该检查错误字段是否存在：

export default function(state = null, action) {
  if (action.error) {
    //handle
  }  
  switch(action.type) {
于 2019-10-02T23:25:17.747 回答