所以我有一个应用程序,我在其中执行登录请求,这是一个异步操作,因此当我单击登录按钮时,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);
}