Я работаю над страницей регистрации и хочу, чтобы мой пользователь перенаправлял на другой компонент после успешной регистрации. Я использую Redux для управления состоянием приложения. Я хочу, чтобы мой пользователь только go переходил на эту определенную страницу после успешного завершения. Подписаться. Проблема в том, что я не знаю, где его можно назвать после успешного действия
Мой компонент
class Signup extends Component {
constructor(props) {
super(props);
this.state = {
user: {
name: '',
surname: '',
emailAddress: '',
userName: '',
password: '',
reEnterPassword: '',
isActive: true,
},
submitted: false,
error: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
const { name, value } = event.target;
const { user } = this.state;
this.setState({
user: {
...user,
[name]: value
}
});
}
async handleSubmit(event) {
event.preventDefault();
this.setState({ submitted: true });
const { user } = this.state;
await store.dispatch(Register.Create(user))
this.props.history.push('/continue')
}
validateEmail = emailAddress => {
var re = /\S+@\S+\.\S+/;
return re.test(emailAddress) && <div className="help-block">Invalid emailAddress</div>;
};
render() {
const { user, submitted } = this.state;
return (
<div id="wrapper" class="signup">
<div class="signup-holder">
<div class="container">
<div class="row">
<div class="col">
<div class="img-bx" style={{backgroundImage: "url(images/img01.jpg)"}}>
</div>
</div>
<div class="col">
<form class="form" onSubmit={this.handleSubmit}>
<div class="logo">
<a href="#">
<img src="images/logo.png"/>
</a>
</div>
<div class={'form-group' + (submitted && !user.name ? ' has-error' : '')} >
<label class="form-label">First Name</label>
<input type="text" class="form-control" name = "name" value={user.name} onChange={this.handleChange} />
{submitted && !user.name &&
<div className="help-block">First Name is Required</div>
}
</div>
<div class={'form-group' + (submitted && !user.surname ? ' has-error' : '')} >
<label class="form-label">Last Name</label>
<input type="text" class="form-control" name = "surname" value={user.surname} onChange={this.handleChange} />
{submitted && !user.surname &&
<div className="help-block">Last Name is Required</div>
}
</div>
<div class={'form-group' + (submitted && !user.userName ? ' has-error' : '')} >
<label class="form-label">UserName</label>
<input type="text" class="form-control" name = "userName" value={user.userName} onChange={this.handleChange} />
{submitted && !user.userName &&
<div className="help-block">userName is Required</div>
}
</div>
<div class={'form-group' + (submitted && !user.emailAddress ? ' has-error' : '')}>
<label class="form-label">Email</label>
<input type="emailAddress" class="form-control" name="emailAddress" value={user.emailAddress} onChange={this.handleChange} />
{submitted && !user.emailAddress &&
<div className="help-block">emailAddress is Required</div>
}
</div>
<div class={'form-group' + (submitted && !user.password ? ' has-error' : '')}>
<label class="form-label">Password</label>
<input type="password" class="form-control" name= "password" value={user.password} onChange={this.handleChange} />
{submitted && !user.password &&
<div className="help-block">Password is Required</div>
}
</div>
<div class={'form-group' + (submitted && !user.reEnterPassword ? ' has-error' : '')}>
<label class="form-label">Re-Enter Password</label>
<input type="password" class="form-control" name="reEnterPassword" value={user.reEnterPassword} onChange={this.handleChange} />
{submitted && !user.reEnterPassword &&
<div className="help-block">Password is Required</div> || user.password != user.reEnterPassword &&
<div className="help-block">Password doesnot match</div>
}
</div>
<div class="form-group clearfix">
<div class="pull-left">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck" name="isActive" value={user.isActive} onChange={this.handleChange}/>
<label class="custom-control-label" for="customCheck">I agree to terms and conditions of leaty</label>
</div>
</div>
<div class="pull-right">
<Link to="/forget_password" >Forget Password ?</Link>
</div>
</div>
<div class="form-group text-center">
<button type="submit" class="btn">Sign in </button>
</div>
<div class="form-group text-center">
<p>If you are already a member Please <Link to="/login" >Sign in</Link></p>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default Signup;
Действие
export default class Register{
static Create(payload){
return {
type: "REGISTER",
payload:payload,
};
}
}
console.log('Success')
Редуктор
import RegisterService from "../API/RegisterService";
import store from '../store/store';
const initialState = {
REGISTER:{},
loading:false,
success:{},
error:{},
};
const REGISTER_REDUCER=(state= initialState,action)=>{
const payload = action.payload;
switch(action.type){
case "REGISTER":
RegisterService.UserRegister(payload)
.then(response=>{
store.dispatch({type:'REGISTER_SUCCESS',payload:response});
})
.then(error=>{
store.dispatch({type:'REGISTER_ERROR',payload:error});
});
return {
...state,
loading:true
};
break;
case "REGISTER_SUCCESS":
console.log(payload.result.id,"ID")
localStorage.setItem('userId',JSON.stringify(payload.result.id))
return{
...state,
loading:false,
REGISTER:payload.result,
};
break;
case "REGISTER_ERROR":
return{
...state,
loading:false,
error:payload,
};
break;
default:
return state;
break;
}
}
export default REGISTER_REDUCER;