Introduction
Today React JS is one of the most popular javascript framework library because it is so simple to code in react js and make web applications, but in the big react project we have to also use the redux to manage the states of our application. Starting with react-redux can be challenging and painful for the beginner’s and the most tricky thing in react-redux is the data flow in the architecture. But In this blog we will create a simple form and reflect form data to next page using the redux library and understand the of data flow in react-redux app.
What you should know
- React
- Redux
Components of Redux architecture
Store=> A Store is a place where the entire state of your application lists. It shows the status of our application.
Action=> Actions are send or dispatched to reducers using the payload.
Action Creator=> These are simple js function which returns a js object which is an action. It improves the code readability and clean code.
Reducer=> Reducer read the payloads from the actions and then updates the store and state of application.
useDispatch=> useDispatch is a hook that is used to dispatch an action.
useSelector=> useSelector is a hook that is use to fetch the state from redux store.
UI Components
In this blog we will create two components:
- User Details Form
- User Profile Page
This is our UserDetails Form Component
function UserDetail() {
const navigate = useNavigate();
const [Name, setName] = useState("");
const [Email, setEmail] = useState("");
const [Password, setPassword] = useState("");
const next = () => {
navigate("/profile");
};
return (
<div className="bg-color-home">
<form id="form" className="validate">
<div className="form-field">
<label>Full Name</label>
<input
value={Name}
onChange={(e) => setName(e.target.value)}
type="text"
name="full-name"
id="full-name"
placeholder="Joe Bloggs"
/>
</div>
<div className="form-field">
<label>Email</label>
<input
value={Email}
onChange={(e) => setEmail(e.target.value)}
type="email"
name="email-input"
id="email-input"
placeholder="example@domain.com"
/>
</div>
<div className="form-field">
<label>Password</label>
<input
value={Password}
onChange={(e) => setPassword(e.target.value)}
type="password"
name="password-input"
id="password-input"
/>
</div>
<div className="form-field">
<label></label>
<input onClick={next} type="submit" value="Submit" />
</div>
</form>
</div>
);
}
export default UserDetail;This is UserProfile Component
function Profilepage() {
const navigate = useNavigate();
const Home = () => {
navigate("/");
};
return (
<div className="bg-color">
<form id="form" className="validate">
<div className="form-field">
<label>Full Name :</label>
<label>Full Name :</label>
</div>
<div className="form-field">
<label>Email :</label>
<label>Email :</label>
</div>
<div className="form-field">
<label>Password :</label>
<label>Password :</label>
</div>
<div className="form-field">
<label></label>
<input onClick={Home} type="submit" value="Home" />
</div>
</form>
</div>
);
}
export default Profilepage;Reducer
Now our reducer will be simple one and will not contain any initial state and root reducer will return the default case.
import * as types from "../action/types";
const initialState = {
};
export const rootReducer = (state = initialState, action) => {
switch (action.type) {
default:
return state;
}
};
Store
import { createStore } from "redux";
import { rootReducer } from "./reducer/reducer";
export const store = createStore(rootReducer);
Sending data to redux store using useDispatch and action creator and types
We have to use useDispatch to send form data to reducer and save the data in redux store. But first we have to create two files first one will be action creator function and seconf will be types which will contain our all action types names.
Action Creators
import * as types from "./types";
export const Form_Data = (data) => ({
type: types.Form_Data,
payload: data,
});Types
export const Form_Data = "form_data";useDispatch
After creating the action creator and types file now using the actions creator we will dispatch our form data. When we trigger the next function then our dispatch function will be called and our action creator function will contain two things type and payload, here we have the mention action name in type and data in payload and then action will be send to reducers.
import { useDispatch } from "react-redux"; // First import the useDispatch
function UserDetail() {
const dispatch = useDispatch();
const next = () => {
let data = {
name: Name,
email: Email,
password: Password,
};
dispatch(Form_Data(data));
};
return (<> JSX </>)
export default UserDetail;Update the Reducer
Now we have to also update the reducer. First we will add the initial state and then we will update the root reducer function.
import * as types from "../action/types";
const initialState = {
userData: {},
};
export const rootReducer = (state = initialState, action) => {
switch (action.type) {
case types.Form_Data:
return { ...state, userData: action.payload };
default:
return state;
}
};
Fetch the form data using the useSelector
Now our form data succesfully saved in the store, the last thing will be remaining now is to fetch the state using the useSelector and show on the user profile page.
import { useSelector } from "react-redux";
function Profilepage() {
const userData = useSelector((state) => state.userData); //fetching the state
return (
<div className="bg-color">
<form id="form" className="validate">
<div className="form-field">
<label>Full Name :</label>
<label>{userData.name}</label>
</div>
<div className="form-field">
<label>Email :</label>
<label>{userData.email}</label>
</div>
<div className="form-field">
<label>Password :</label>
<label>{userData.password}</label>
</div>
<div className="form-field">
<label></label>
<input onClick={Home} type="submit" value="Home" />
</div>
</form>
</div>
);
export default Profilepage;
Conclusion
In this blog we learn how the data flow of redux in react project but the more we will practice will give the clear idea of how the data flow in react-redux, So keep Practice. To learn more about Redux follow this link.
For more updates, please follow our LinkedIn page- FrontEnd Studio.
Thank you for sticking to the end. If you like the blog, please don’t forget to give a thumbs up and share it. Feel free to share your thoughts about this blog in the comments.