Обработка ошибок асинхронных actions в redux thunk

Question

Моя задача простая: задиспатчить thunk , которая отправит запрос на сервер. Если операция прошла успешно - выполнить редирект на нужную страницу.

Функция, которая примет данные с формы при onSubmit, задиспатчит thunk signIn и совершит редирект:

   const history = useHistory();
   const dispatch = useDispatch();

const onLoginHandler = (data) => {
    dispatch(signIn(data));
    history.push('/redirect-some-where')
};

К слову, использую redux toolkit. Ниже демонстрация slice и thunk

const authSlice = createSlice({
  name: "auth",
  initialState: {
    nickname: ""
  ,
  reducers: {
    setNickname: (state, { payload }) => {
      state.nickname = payload;
    },
  },
});

export const signIn = (data) => {
  return async (dispatch) => {
      const request = await fetch(
        'some_api_endpoint',
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify(data),
        }
      );
      const response = await request.json();
      dispatch(setNickname(response.name));

  };
};

Осталось обработать ошибки. Пробовал сделать через try catch:

export const signIn = (data) => {
      return async (dispatch) => {
        try {
          const request = await fetch(
            'some_api_endpoint',
            {
              method: "POST",
              headers: {
                "Content-Type": "application/json",
              },
              body: JSON.stringify(data),
            }
          );
          const response = await request.json();
          dispatch(setNickname(response.name));
        } catch(error) {
          console.error(error)
        }
      };
    };

Проблема в том, что неважно, выдаст ли ошибку thunk - onLoginHandler все равно выполнит редирект. Пробовал так же обернуть в try catch эту функцию:

const onLoginHandler = (data) => {
  try {
      dispatch(signIn(data));
      history.push('/redirect-some-where')
   } catch(err) {
    console.error(err)
   }
};

Всё так же выполнялся редирект, несмотря на ошибку в сетевом запросе. Пробовал так же и добавить, например, поле isError в state, в thunk диспатчить экшн setError(true) в блоке catch и затем в функции-хендлере проверять на наличие ошибки. В случае её отсутствия - пробовать выполнять редирект. Но редирект все так же выполнялся, несмотря на провал запроса. Хотя в Devtools видно как isError менялся на true. Тогда вопрос: как правильно обработать ошибку в thunk?

БЛОГ НА HUSL

Обработка ошибок асинхронных actions в redux thunk

Ответы (0 шт):