Обновления состояния после действия отправки происходят со второй попытки в избыточном транке - PullRequest
Новая
       5

Обновления состояния после действия отправки происходят со второй попытки в избыточном транке

0 голосов
/ 29 декабря 2018

Итак, у меня есть приложение, в котором я выполняю запрос на вход, который является асинхронным действием, поэтому, когда я нажимаю кнопку входа в систему, активируется действие aync, но не обновляет состояние, но когда я снова отправляю действие, нажимая кнопку входа в состояние (значение currentUserEmail в состоянии редуктора) обновляется сейчас, что тут не так?Я ломаю голову, пожалуйста, помогите.

Вот мои создатели действий: 

export const loginRequest = (email, password) => {
    return async function(dispatch) {
        dispatch({
            type: types.LOGIN_REQUEST_STARTED
        });
        try {
            const res = await axios.post('/api/login', {
            email,
            password
        });
        dispatch({
            type: types.LOGIN_REQUEST_SUCCESS,
            payload: res
        });
    } catch(ex) {
        dispatch({
            type: types.LOGIN_REQUEST_FAILURE,
            payload: ex
        });
    }
    }
}

Вот моя функция редукторов: 

  import * as types from './../actions/types';




const initState = {
    isCurrentUser : false,
    isLoginSelected : true,
    isLoginRequestStarted: false,
    currentUserEmail: '',
    loginError: ''

}
export default function(state=initState, action) {



    switch(action.type) {







        case types.LOGIN_REQUEST_STARTED : 
            console.log("loading");
             if(!state.isLoginRequestStarted) {
                 return {
                     ...state,
                     isLoginRequestStarted : true
                 }
             }else {
                 return state
             }


        case types.LOGIN_REQUEST_SUCCESS : 
             const currentState = {
                 ...state,
                 currentUserEmail: action.payload.data.email,
                 isLoginRequestStarted: false
             }
             return currentState;


        case types.LOGIN_REQUEST_FAILURE :
             return {
                 ...state,
                loginError: action.payload,
                isLoginRequestStarted: false
             }


        default: 
            return state
    }
}

Вот мой снимокof LoginForm.js: 

function mapDispatchToProps(dispatch) {
    return {
        loginRequest : (email, password) => dispatch(actions.loginRequest(email, password))
    }
}

function mapStateToProps(state) {
    return {
        currentUserEmail : state.loginReducer.currentUserEmail
    }
}

export default reduxForm({
    form: 'loginForm',
    validate
})(connect(mapStateToProps, mapDispatchToProps)(LoginForm));
onSubmit = (formValues) => {
    console.log(formValues);
     this.props.loginRequest(formValues.email, formValues.password);
     console.log(this.props.currentUserEmail);


}
    render() {
        return(

            <form onSubmit={this.props.handleSubmit(this.onSubmit)}>
                <Field name="email" component={this.renderInput} label="Email" />
                <Field name="password"  component={this.renderInput} label="password" type="password"/>

                <button >{this.props.isL ? 'Login' : 'Register'}</button>
            </form>
        );
    }
}

const validate = (formValues) => {
    const errors = {};

    if(!formValues.email) {
        errors.email = "Email cant be blank"
    }

    if(!formValues.password) {
        errors.password = "password cant be blank"
    }

    return errors;
}

 onSubmit = (formValues) => {
        console.log(formValues);
         this.props.loginRequest(formValues.email, formValues.password);
         console.log(this.props.currentUserEmail);


    }
...