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

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

0 голосов
/ 23 ноября 2018

Если я выполняю все запросы аутентификации к своему API не непосредственно в функции «handleSubmit» response-redux, а в настраиваемом действии Redux, у меня возникает проблема с отображением любых ошибок, полученных сервером в качестве ответа.

Это действие аутентификации (authActions.js): 

export const loginUser = userData => dispatch => {
  axios
    .post("auth/local/signin")
    .then(res => {

      dispatch({
        type: SET_CURRENT_USER,
        payload: res
      });
    })
    .catch(err => {

      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      });
    });
};

authReducer.js 

import { SET_CURRENT_USER } from "../actions/types";

const initialState = {
  isAuthenticated: false,
  user: {}
};

export default function(state = initialState, action) {
  switch (action.type) {
    case SET_CURRENT_USER:
      return {
        ...state,
        isAuthenticated: Object.keys(action.payload).length > 0,
        user: action.payload
      };

    default:
      return state;
  }
}

errorReducer.js 

  import { GET_ERRORS, CLEAR_ERRORS } from "../actions/types";

    const initialState = {};

    export default function(state = initialState, action) {
      switch (action.type) {
        case GET_ERRORS:
          return action.payload;
        case CLEAR_ERRORS:
          return {};
        default:
          return state;
      }
    }

Единственное, что пришло в голову, - это подключиться к компоненту redux, а также redux-form, а затем перейти к сообщению о возможной ошибке через "новая SubmissionError (ошибки) ".Но это не работает при первой отправке. 

class SignInForm extends Component {

  handleSubmit = values => {
    const userData = {
      username: values.username,
      password: values.password
    };

    this.props.loginUser(userData);

    const { errors } = this.props;
    console.log(errors);

    errors.username = errors.user;

    if (errors) throw new SubmissionError(errors);
  };

  render() {
    const { valid, handleSubmit, submitting } = this.props;

    return (
      <View>
      ...
      </View>
    );
  }
}

const mapStateToProps = state => ({
  auth: state.auth,
  errors: state.errors
});

const form = reduxForm({
  form: "Login", 
  validate, 
  asyncValidate,
  asyncChangeFields: ["username"]
})(SignInForm);

export default connect(
  mapStateToProps,
  { loginUser }
)(form);

1 Ответ

0 голосов
/ 24 ноября 2018

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

authActions.js 

export const loginUser = userData => dispatch => {
    return new Promise((resolve, reject) => {
        axios
        .post("auth/local/signin")
        .then(res => {

          dispatch({
            type: SET_CURRENT_USER,
            payload: res
          });
          return resolve();
        })
        .catch(err => {
          return reject(err);
        });
    });
}

signin.js (?) 

handleSubmit = values => {
    const userData = {
      username: values.username,
      password: values.password
    };

    this.props.loginUser(userData)
        .catch((err) => {
            this.setState({ errorMsg: err });
        });

};

render() {
    const { valid, handleSubmit, submitting } = this.props;

    return (
      <View>
          ...
          <div>Failed to login with error message: {this.state.errorMsg}</div>
      </View>
    );
}
...