Варианты менеджмента обработки состояний запросов в Redux?

export const authLogin = userData => async dispatch => {
    dispatch(fetchPending())

    try {
      const { token } = await ApiService.post('/api/users/login', userData)

      setAuthToken(token)
      await dispatch(setCurrentUser(decodeJwt(token)))

      history.push("/")
    } catch(err) {
      dispatch(fetchFailed(err.response.errors))
    }
}

Вот так в большестве своём пишу экшены, но терзает вопрос, есть ли ещё более лаконичные способы обработать состояние запроса?
  • Вопрос задан
  • 482 просмотра
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
В плане так их надо передать в редюсер для ошибок, а в компоненте следить за изменением этого редюсера...

Не надо. Ошибку и состояние загрузки можно обрабатывать в том же редьюсере, что и токен.
const initialState = {
  isFetching: false,
  token: null,
  error: null,
};

function auth(initialState, action) {
  switch(action.type) {
    case LOGIN_REQUEST:
      return {
        ...state,
        isFetching: true,
        error: null,
      };

    case LOGIN_SUCCEEDED:
      return {
        ...state,
        isFetching: false,
        token: action.payload,
      };

    case LOGIN_FAILED:
      return {
        ...state,
        isFetching: false,
        error: action.payload,
      };

    default:
      return state;
  }
}


Будет ли правильным делать запросы из компонента?

Не будет.

Ведь так при ошибке мы может её сразу добавить в стейт errors компонента и всё.

Не ясно зачем вам вообще добавлять ошибку в state.

const mapStateToProps = state => ({
  error: loginErrorSelector(state),
});


render() {
  const { error } = this.props;

  if (error) return <TryAgain error={error} action={login} />;
  
  return ( /* ... */ );
}
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
jt3k
@jt3k
Фронтендер, люблю работать и получать удовольствия
Антон Спирин, отличный пример показал. Стоит добавить что удобно создавать данные экшены через специальный миддлвэр - promise-middleware. В который ты передашь только ключевое слово LOGIN и сам промис запроса, а на выходе получишь вызов редюсеров, как описал Антон
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы