I am having a page which says enter your mail id to change password, upon entering the mail id and hitting the submit button i want user to get redirect to another page, until now for navigation i was doing stuff like
const redirect = useCallback(() => navigate("/login"), [navigate]);
redirect()
but seems they can only be used within functional components and i want to redirect user within my action creater as i am using redux
Here is my code
const ForgotPassword: React.FC<Props> = (props) => {
const {
register,
handleSubmit,
errors,
control,
setValue,
getValues,
} = useForm();
const { navigate } = useContext(NavContext);
const [email, setEmail] = useState("");
const dispatch = useDispatch();
const modal = useSelector((state: RootState) => {
return { modal: state.modal };
});
const error = useSelector((state: RootState) => {
return { error: state.error.iserror };
});
const onSubmit = (data: any) => {
console.log(errors.keys);
console.log(data);
dispatch(changePassword(data.email));
};
const redirect = useCallback(() => navigate("/set-password"), [navigate]);
return (
<div>
<Layout title={"Forgot Password"} backButton={false} backHref={""} />
<IonContent>
<div className="forgot-content">
<form onSubmit={handleSubmit(onSubmit)}>
<IonItem>
<IonLabel position="stacked" className="otpMail">
Email
</IonLabel>
<Controller
render={({ onChange, onBlur, value }) => (
<IonInput
placeholder="Enter your email"
onIonChange={onChange}
/>
)}
control={control}
name="email"
defaultValue=""
rules={{
required: true,
pattern: {
value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
message: "Error",
},
}}
/>
{_.get("email.type", errors) === "required" && (
<p className="errorWarning">This field is required</p>
)}
{_.get("email.type", errors) === "pattern" && (
<p className="errorWarning">Email address is not valid</p>
)}
</IonItem>
<div className="verifyButton">
<IonButton type="submit" expand="block">
Get OTP
</IonButton>
</div>
</form>
</div>
</IonContent>
</div>
);
};
export default ForgotPassword;
action creater
export const changePassword = (email: string) => async (dispatch: any) => {
axios.post("http://localhost:4000/change_password", email).then((res) => {
console.log(res);
if (res.data.status == 200) {
dispatch({
type: CHANGE_PASSWORD,
payload: res.data.msg,
});
/// I want to redirect user at this point to '/set-password'///
} else if (res.data.status == 600) {
dispatch({
type: SHOW_MODAL_FAILED_TASK,
payload: res.data.msg,
});
} else {
dispatch(errorActions());
}
});
};
App,tsx
const App: React.FC = () => (
<IonApp>
<IonReactRouter>
<IonRouterOutlet id="menu">
<Route path="/signup" component={Signup} exact={true} />
<Route path="/" component={Home} exact={true} />
<Route path="/verify" component={Verify} exact={true} />
<Route path="/login" component={Login} exact={true} />
<Route
path="/forgot-password"
component={forgotPassword}
exact={true}
/>
<Route path="/set-password" component={setPassword} exact={true} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
export default App;
Index.tsx
ReactDOM.render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<App />
</PersistGate>
</Provider>,
document.getElementById("root")
);