Правильный способ обработки ошибок в редуксе с использованием избыточного обещания - PullRequest
Новая
       9

Правильный способ обработки ошибок в редуксе с использованием избыточного обещания

0 голосов
/ 05 июня 2019

Я пытаюсь "избыточное обещание". Когда в потоке нет ошибок, мой код работает правильно. Но допустим, что 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}

Я не знаю, где лучше всего это сделать: создатель действий, редуктор и т. Д. Я не должен проверять, находится ли полезная нагрузка в редукторе, и, если нет, возвращать состояние или ничего не делать. Я хочу понять, какой из подходов лучше всего с этим справиться.

1 Ответ

0 голосов
/ 05 июня 2019

Вы можете взглянуть на источник излишнего обещания, так как оно очень просто.

Redux-обещание ожидает либо promise, либо действие с полезной нагрузкой, установленной на некоторое promise. Я думаю, вы собираетесь использовать чехол для письма.

Код может выглядеть (просто пример, не проверен): 

export function fetchUsers() {

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

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

В этом случае избыточное обещание будет ожидать разрешения обещания, возвращенного axios.get, и отправит ваше действие, но payload будет заменено результатом обещания. В случае ошибки, redux-обещание перехватит его и отправит действие с error = true (вы можете обработать action.error === true регистр в редукторе)

...