Как исправить: ошибка в аксоисе при вылове и после отправки не попала в реквизит - PullRequest
1 голос
/ 11 октября 2019

Я новичок в избыточном реагировании и создании веб-приложения, в котором приложение взаимодействует со структурой API lumen. Когда запрос переходит на сервер и возвращает с кодом ошибки 400 404 500 любой код состояния (ошибка), кроме 200, он показывает ошибку консоли и обрабатывается после этого в реакции.

Я пытался передать значение при получении ошибки в axois.catch ({dispatch});но значение обновляется в состоянии, просматривая redux-dev-tool, но не получает значение в реквизитах.

Начиная с API я передал как:

if ($validator->fails()) {
   return response()->json(['type'=> 'error','message'=> $validator->errors()->all()],400);
}

И в моем файле действий какнапример:

export const loginRequest = formValues => async dispatch => {

await user.post('/user/create', { ...formValues, device_id: 12345}).then(response => {
  dispatch ({type: LOGIN, payload: response.data});
}).catch(error => {
  if(error.response) {
    dispatch ({ type: ERRORS, payload: error.response.data.message });
  }
});
}

и в редукторе:

const INTIAL_STATE = {
    isSignedIn: null,
    accessToken: null,
    loginMessage: null,
    errorMessage: null
};

export default (state = INTIAL_STATE, action) => {
switch (action.type){
    case ERRORS:
        return { ...state, isSignedIn: false, accessToken:null , errorMessage: action.payload };
    default:
        return state;
}
};

как в последнем файле моего компонента:

const mapStateToProps = state => {
  return {error: state.auth.errorMessage};
};

и консольный журнал в методе рендеринга: console.log(this.props);

Я получаю POST http://localhost:8000/user/create 500 (Внутренняя ошибка сервера) в моей консоли, но значение errorMessage обновлено в состоянии, как выглядело в redux-dev-tool и после ошибкикод не выполняется.

Ответы [ 2 ]

1 голос
/ 11 октября 2019

Используйте redux-saga-рутины для диспетчеризации действий, упростите вашу работу с этим модулем. Вот его документация ссылка https://github.com/afitiskin/redux-saga-routines

0 голосов
/ 11 октября 2019

Ожидать изменения асинхронной синхронизации. Так что не стоит писать обещание за это. Таким образом, вы можете изменить его на что-то вроде этого:

export const loginRequest = formValues => async dispatch => {
    try {
        const response = await user.post('/user/create', { ...formValues, device_id: 12345 });
        dispatch ({ type: LOGIN, payload: response.data });
    } catch (error) {
        if(error.response) {
            dispatch ({ type: ERRORS, payload: error.response.data.message });
        }
    }
}
...