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

Question

[Княшшш]

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))
    }
}

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

Comments

[tvsjke]

Ну если проект не большой, можно и в компонентах, почему нет

А вообще выносишь все в axios.interceptors и обрабатываешь все типы ошибок в одном месте, оттуда же и стейт обновляешь

[Олег Гамега]

// Set token to ls
localStorage.setItem("jwtToken", token);

ни надо так делать ... есть куки

[davidnum95]

Олег Гамега, 4кб хватит всем?

[Олег Гамега]

davidnum95, нет, просто ls могут читатть могут все кому не лень, любой скрипт, любое расширение может прочитать даныне оттуда

[davidnum95]

Олег Гамега, бред, а куки типа не могут?

[Олег Гамега]

davidnum95, у как все запущено ..... уважаемый, храните их где хотите

[davidnum95]

Олег Гамега, взаимно

Answer 1

[Антон Спирин]

В плане так их надо передать в редюсер для ошибок, а в компоненте следить за изменением этого редюсера...

Не надо. Ошибку и состояние загрузки можно обрабатывать в том же редьюсере, что и токен.

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 ( /* ... */ );
}

Answer 2

[Андрей Гуртовой]

Антон Спирин, отличный пример показал. Стоит добавить что удобно создавать данные экшены через специальный миддлвэр - promise-middleware. В который ты передашь только ключевое слово LOGIN и сам промис запроса, а на выходе получишь вызов редюсеров, как описал Антон