How i can implement redux saga concept in login page react - reactjs

Question

Here how can i implement this login page using Redux saga concept. I also attached my codesandbox link below. Please provide any ideas to implement using redux saga concept.
For what purpose we mainly use redux saga concepts in react. Please provide any articles for learning redux saga.
https://codesandbox.io/s/inspiring-rain-olm7wx?file=/src/components/Login.jsx
import React from "react";
import { connect } from "react-redux";
import { loginAction } from "../actions/loginAction";
import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { useSelector } from "react-redux";
const emailValidator = /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
const passwordValidator = /(?=.*[a-z])/;
function Login(props) {
let navigate = useNavigate();
const isLogin = useSelector((state) => state.login.isLogin);
useEffect(() => {
if (isLogin) {
navigate("/");
}
}, [isLogin]);
const [state, setState] = useState({
email: "",
password: "",
emailAddressError: "",
passwordError: "",
isLogin: false,
isFormSubmitted: false
});
const handleChange = (event) => {
const { name, value } = event.target;
setState((prev) => ({ ...prev, [name]: value }));
return;
};
const handleBlur = (event) => {
const { name } = event.target;
validateField(name);
return;
};
const handleSubmit = (event) => {
event.preventDefault();
var data = {
email: state.email,
password: state.password
};
let formFileds = ["email", "password"];
let isValid = true;
formFileds.forEach((field) => {
isValid = validateField(field) && isValid;
});
if (isValid) {
setState((prev) => ({ ...prev, isFormSubmitted: true }));
const dispatch = props.dispatch;
dispatch(loginAction.login(data));
} else setState((prev) => ({ ...prev, isFormSubmitted: false }));
return state.isFormSubmitted;
};
const validateField = (name) => {
let isValid = false;
if (name === "email") isValid = validateemail();
else if (name === "password") isValid = validatePassword();
return isValid;
};
const validateemail = () => {
let emailAddressError = "";
const value = state.email;
if (value.trim() === "") emailAddressError = "Email Address is required";
else if (!emailValidator.test(value))
emailAddressError = "Email is not valid";
setState((prev) => ({ ...prev, emailAddressError }));
return emailAddressError === "";
};
const validatePassword = () => {
let passwordError = "";
const value = state.password;
if (value.trim() === "") passwordError = "Password is required";
else if (!passwordValidator.test(value))
passwordError = "Password contains small character only";
setState((prev) => ({ ...prev, passwordError }));
return passwordError === "";
};
return (
<div>
<div>
<div class="no-gutters row" style={{ height: "100vh" }}>
<div class="d-flex flex-column justify-content-center align-items-center h-100 col-12 col-md-6">
<div class="container">
<div class="d-flex justify-content-center row">
<div class="col-auto col-lg-8">
<h5 class="fw-bold mb-5">Login</h5>
<form className="form" onSubmit={handleSubmit}>
<div class="form-group">
<label class="form-label">
<b>Email</b>
</label>{" "}
<span style={{ color: "red" }}> *</span>
<input
type="text"
class="form-control"
label="email"
name="email"
value={state.email}
onChange={handleChange}
placeholder="email"
onBlur={handleBlur}
autoComplete="off"
/>
{state.emailAddressError && (
<div className="errorMsg" style={{ color: "red" }}>
{state.emailAddressError}
</div>
)}
</div>
<div class="Login_formGroup__3wtgQ form-group">
<label class="form-label">
<b>Password</b>
</label>{" "}
<span style={{ color: "red" }}> *</span>
<input
type="password"
class="form-control"
variant="outlined"
id="outlined-basic"
label="password"
name="password"
value={state.password}
onChange={handleChange}
placeholder="password"
onBlur={handleBlur}
autoComplete="off"
/>
{state.passwordError && (
<div className="errorMsg" style={{ color: "red" }}>
{state.passwordError}
</div>
)}
</div>
<div class="d-flex justify-content-between align-items-center mt-5">
<button
class="btn "
style={{ backgroundColor: "#bd744c", color: "white" }}
>
<b>LOGIN</b>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
const mapStateToProps = (state) => {
return {
token: state.login.token
};
};
export default connect(mapStateToProps)(Login);