在Redux thunk中的第二次尝试发生调度动作后的状态更新

时间:2018-12-29 17:03:49

标签: reactjs redux redux-thunk

所以我有一个应用程序,我在其中执行登录请求,这是一个异步操作,因此当我单击登录按钮时,aync操作会启动,但不会更新状态,但是当我再次通过单击登录按钮来分派操作时,状态(现在,reducer状态下的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
    }
}

这是我的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);


    }

0 个答案:

没有答案