Introduction
This article will teach us how to redux with react js application.
Redux is a popular Javascript library used to manage state in web applications.
We will also learn some of its core building blocks, such as a store, actions, and reducers, and how to make Redux the global state management library.
Prerequisites
- JavaScript
- Basic knowledge of Next.js
- Node.js
- V.S. Code, Visual Studio
We cover the below things,
- Create Next.js application
- How to use redux
Step 1. Run the below code to create the Next.js application.
npx create-next-app primeflexappnextredux
cd primeflexappnextredux
npm run dev
Step 2. Run the below command to install Redux and Redux Persist.
npm i @reduxjs/toolkit
npm i redux-thunk
npm i redux-persist
Create the files according to the below image.
Step 3. Add the below code in the app.js.
import { store } from '../redux/Store';
import '@/styles/globals.css';
import { Provider } from "react-redux";
import HeaderMain from './HeaderMain';
export default function App({ Component, pageProps }) {
return (
<Provider store={store}>
<HeaderMain />
<Component {...pageProps} />
</Provider>
)
}
Step 4. Add the below code in the index.js.
import Head from 'next/head'
import Image from 'next/image'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import MyReduxUseInNextPage from './MyReduxUserInNextJsPage'
const inter = Inter({ subsets: ['latin'] })
export default function Home() {
return (
<>
<Head>
<title>Create Next App</title>
<meta name="description" content="Generated by create next app" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="/favicon.ico" />
<link rel="stylesheet" href="https://unpkg.com/primeflex@^3/primeflex.css" />
<link rel="stylesheet" href="https://unpkg.com/primeflex/themes/saga-blue.css" />
<link rel="stylesheet" href="https://unpkg.com/primeflex/themes/arya-blue.css" />
<link rel="stylesheet" href="https://unpkg.com/primeflex/themes/vela-blue.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65"
crossorigin="anonymous"
/>
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>
<script
src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
crossorigin></script>
<script
src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
crossorigin></script>
</Head>
<main className={styles.main}>
<div className={styles.grid}>
<MyReduxUseInNextPage />
</div>
</main>
</>
)
}
Step 5. Add the below code in the Home.module.css
.main {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
padding: 6rem;
min-height: 100vh;
}
.description {
display: inherit;
justify-content: inherit;
align-items: inherit;
font-size: 0.85rem;
max-width: var(--max-width);
width: 100%;
z-index: 2;
font-family: var(--font-mono);
}
.description a {
display: flex;
justify-content: center;
align-items: center;
gap: 0.5rem;
}
.description p {
position: relative;
margin: 0;
padding: 1rem;
background-color: rgba(var(--callout-rgb), 0.5);
border: 1px solid rgba(var(--callout-border-rgb), 0.3);
border-radius: var(--border-radius);
}
.code {
font-weight: 700;
font-family: var(--font-mono);
}
.grid {
display: grid;
grid-template-columns: repeat(1, minmax(100%, auto));
width: var(--max-width);
max-width: 100%;
}
.card {
padding: 1rem 1.2rem;
border-radius: var(--border-radius);
background: rgba(var(--card-rgb), 0);
border: 1px solid rgba(var(--card-border-rgb), 0);
transition: background 200ms, border 200ms;
}
.card span {
display: inline-block;
transition: transform 200ms;
}
.card h2 {
font-weight: 600;
margin-bottom: 0.7rem;
}
.card p {
margin: 0;
opacity: 0.6;
font-size: 0.9rem;
line-height: 1.5;
max-width: 30ch;
}
.center {
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 4rem 0;
}
.center::before {
background: var(--secondary-glow);
border-radius: 50%;
width: 480px;
height: 360px;
margin-left: -400px;
}
.center::after {
background: var(--primary-glow);
width: 240px;
height: 180px;
z-index: -1;
}
.center::before,
.center::after {
content: '';
left: 50%;
position: absolute;
filter: blur(45px);
transform: translateZ(0);
}
.logo,
.thirteen {
position: relative;
}
.thirteen {
display: flex;
justify-content: center;
align-items: center;
width: 75px;
height: 75px;
padding: 25px 10px;
margin-left: 16px;
transform: translateZ(0);
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: 0px 2px 8px -1px #0000001a;
}
.thirteen::before,
.thirteen::after {
content: '';
position: absolute;
z-index: -1;
}
/* Conic Gradient Animation */
.thirteen::before {
animation: 6s rotate linear infinite;
width: 200%;
height: 200%;
background: var(--tile-border);
}
/* Inner Square */
.thirteen::after {
inset: 0;
padding: 1px;
border-radius: var(--border-radius);
background: linear-gradient(
to bottom right,
rgba(var(--tile-start-rgb), 1),
rgba(var(--tile-end-rgb), 1)
);
background-clip: content-box;
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
.card:hover {
background: rgba(var(--card-rgb), 0.1);
border: 1px solid rgba(var(--card-border-rgb), 0.15);
}
.card:hover span {
transform: translateX(4px);
}
}
@media (prefers-reduced-motion) {
.thirteen::before {
animation: none;
}
.card:hover span {
transform: none;
}
}
/* Mobile */
@media (max-width: 700px) {
.content {
padding: 4rem;
}
.grid {
grid-template-columns: 1fr;
margin-bottom: 120px;
max-width: 320px;
text-align: center;
}
.card {
padding: 1rem 2.5rem;
}
.card h2 {
margin-bottom: 0.5rem;
}
.center {
padding: 8rem 0 6rem;
}
.center::before {
transform: none;
height: 300px;
}
.description {
font-size: 0.8rem;
}
.description a {
padding: 1rem;
}
.description p,
.description div {
display: flex;
justify-content: center;
position: fixed;
width: 100%;
}
.description p {
align-items: center;
inset: 0 0 auto;
padding: 2rem 1rem 1.4rem;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
background: linear-gradient(
to bottom,
rgba(var(--background-start-rgb), 1),
rgba(var(--callout-rgb), 0.5)
);
background-clip: padding-box;
backdrop-filter: blur(24px);
}
.description div {
align-items: flex-end;
pointer-events: none;
inset: auto 0 0;
padding: 2rem;
height: 200px;
background: linear-gradient(
to bottom,
transparent 0%,
rgb(var(--background-end-rgb)) 40%
);
z-index: 1;
}
}
/* Tablet and Smaller Desktop */
@media (min-width: 701px) and (max-width: 1120px) {
.grid {
grid-template-columns: repeat(2, 50%);
}
}
@media (prefers-color-scheme: dark) {
.vercelLogo {
filter: invert(1);
}
.logo,
.thirteen img {
filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
}
}
@keyframes rotate {
from {
transform: rotate(360deg);
}
to {
transform: rotate(0deg);
}
}
Step 6. Add the below code in the globals.css.
:root {
--max-width: 1100px;
--border-radius: 12px;
--font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono',
'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro',
'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace;
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
--primary-glow: conic-gradient(from 180deg at 50% 50%,
#16abff33 0deg,
#0885ff33 55deg,
#54d6ff33 120deg,
#0071ff33 160deg,
transparent 360deg);
--secondary-glow: radial-gradient(rgba(255, 255, 255, 1),
rgba(255, 255, 255, 0));
--tile-start-rgb: 239, 245, 249;
--tile-end-rgb: 228, 232, 233;
--tile-border: conic-gradient(#00000080,
#00000040,
#00000030,
#00000020,
#00000010,
#00000010,
#00000080);
--callout-rgb: 238, 240, 241;
--callout-border-rgb: 172, 175, 176;
--card-rgb: 180, 185, 188;
--card-border-rgb: 131, 134, 135;
}
@media (prefers-color-scheme: dark) {
:root {
--foreground-rgb: 255, 255, 255;
--background-start-rgb: 0, 0, 0;
--background-end-rgb: 0, 0, 0;
--primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
--secondary-glow: linear-gradient(to bottom right,
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0),
rgba(1, 65, 255, 0.3));
--tile-start-rgb: 2, 13, 46;
--tile-end-rgb: 2, 5, 19;
--tile-border: conic-gradient(#ffffff80,
#ffffff40,
#ffffff30,
#ffffff20,
#ffffff10,
#ffffff10,
#ffffff80);
--callout-rgb: 20, 20, 20;
--callout-border-rgb: 108, 108, 108;
--card-rgb: 100, 100, 100;
--card-border-rgb: 200, 200, 200;
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: rgb(var(--foreground-rgb));
background: linear-gradient(to bottom,
#0696a9,
rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb));
}
a {
color: inherit;
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
Step 7. Add the below code in the MyReduxUserInNextJsPage.js.
import Image from 'next/image'
import { useRouter } from 'next/router'
import styles from '@/styles/Home.module.css';
import { useDispatch, useSelector } from 'react-redux';
import { Profilestatus } from '@/redux/actions/profileActions';
import Link from 'next/link';
import { useState } from 'react';
import Button from 'react-bootstrap/Button';
import Form from 'react-bootstrap/Form';
import { Card, Col, Row } from 'react-bootstrap';
import InputGroup from 'react-bootstrap/InputGroup';
const MyReduxUseInNextPage = () => {
const router = useRouter();
const dispatch = useDispatch();
const storeState = useSelector(state => state);
const [Data, setData] = useState({
FirstName: '',
LastName: '',
UserName: '',
MobileNo: ''
});
const [validated, setValidated] = useState(false);
const HandleSubmit = (event) => {
debugger
event.preventDefault();
console.log(Data)
dispatch(Profilestatus(Data));
router.push('/ShowDataRedux');
}
const handleInputChange = (event) => {
debugger
event.preventDefault();
const { name, value } = event.target;
setData((Data) => ({
...Data,
[name]: value
}));
}
return (
<>
<Form onSubmit={HandleSubmit}>
<Row className="mb-3">
<Form.Group as={Col} md="6" controlId="validationCustom01">
<Form.Label>First name</Form.Label>
<Form.Control
type="text"
placeholder="First name"
name='FirstName'
value={Data.FirstName}
onChange={handleInputChange}
/>
</Form.Group>
<Form.Group as={Col} md="6" controlId="validationCustom02">
<Form.Label>Last name</Form.Label>
<Form.Control
type="text"
placeholder="Last name"
name='LastName'
value={Data.LastName}
onChange={handleInputChange}
/>
</Form.Group>
<Form.Group as={Col} md="6" controlId="validationCustomUsername">
<Form.Label>User Name</Form.Label>
<InputGroup hasValidation>
<InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
name='UserName'
value={Data.UserName}
onChange={handleInputChange}
/>
</InputGroup>
</Form.Group>
<Form.Group as={Col} md="6" controlId="validationCustomUsername">
<Form.Label>Mobile No.</Form.Label>
<InputGroup hasValidation>
<Form.Control
type="text"
placeholder="Username"
aria-describedby="inputGroupPrepend"
name='MobileNo'
value={Data.MobileNo}
onChange={handleInputChange}
/>
</InputGroup>
</Form.Group>
</Row>
<Form.Group className="mb-3">
<Form.Check
label="Agree to terms and conditions"
feedback="You must agree before submitting."
feedbackType="invalid"
/>
</Form.Group>
<Button type="submit"> Send data to Another Component Using Redux</Button>
</Form>
</>
)
}
export default MyReduxUseInNextPage
Step 8. Add the below code in ShowDataRedux.js.
import { useDispatch, useSelector } from 'react-redux';
import Table from 'react-bootstrap/Table';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Col, Row } from 'react-bootstrap';
import styles from '@/styles/Home.module.css';
const ShowDataRedux = () => {
const dispatch = useDispatch();
const storeState = useSelector(state => state);
return (
<>
<main className={styles.main}>
<div className={styles.grid}>
<h1>Redux Data</h1>
<Row>
<Col lg={12}>
<Table striped bordered hover variant="primary">
<tbody>
<tr>
<th>First Name</th>
<td>{storeState.Profile.ProfileData.FirstName}</td>
</tr>
<tr>
<th>Last Name</th>
<td>{storeState.Profile.ProfileData.LastName}</td>
</tr>
<tr>
<th>Username</th>
<td>{storeState.Profile.ProfileData.UserName}</td>
</tr>
<tr>
<th>Mobile No.</th>
<td>{storeState.Profile.ProfileData.MobileNo}</td>
</tr>
</tbody>
</Table>
</Col>
</Row>
</div>
</main>
</>
)
}
export default ShowDataRedux
Step 9. Add the below code in the ProfileActions.js.
export const PROFILE_SUCCESS = "PROFILE_SUCCESS";
export function Profilestatus(ProfileData) {
return dispatch => {
dispatch({
type: PROFILE_SUCCESS,
payload: ProfileData
});
}
}
Step 10. Add the below code in the ProfileReducer.js.
import { PROFILE_SUCCESS, } from "../actions/profileActions"
const initialState = {
ProfileData: []
}
export default function ProfileReducer(state = initialState, action) {
console.log(action)
console.log(state)
switch (action.type) {
// return { ...state, ProfileData: [...state.ProfileData, action.payload] };
case PROFILE_SUCCESS:
return {
ProfileData: action.payload,
// ...state, //copying the original state
// updatedUserData: action.payload //new todos array
}
default:
return state
}
}
Step 11. Add the below code in the RootReducer.js
import { combineReducers } from "redux";
import ProfileReducer from "./ProfileReducer";
const RootReducer = combineReducers({
Profile: ProfileReducer
});
export default RootReducer;
Step 12. Add the below code in the RootReducer.js.
import { createStore, applyMiddleware, compose } from "redux";
import RootReducer from "./reducers/RootReducer";
import thunk from "redux-thunk";
import { configureStore } from "@reduxjs/toolkit";
import storage from 'redux-persist/lib/storage';
import { persistReducer, persistStore } from 'redux-persist';
// import thunk from 'redux-thunk';
const persistConfig = {
key: 'root',
storage,
}
const initialState = {};
const persistedReducer = persistReducer(persistConfig, RootReducer)
export const store = configureStore({
reducer: persistedReducer,
RootReducer: persistedReducer,
initialState,
devTools: process.env.NODE_ENV !== 'production',
middleware: [thunk]
})
export const persistor = persistStore(store)
Step 13. Add the below code in the package.json
{
"name": "primeflexappnextredux",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@reduxjs/toolkit": "^1.9.3",
"bootstrap": "^5.2.3",
"next": "13.2.4",
"react": "18.2.0",
"react-bootstrap": "^2.7.2",
"react-dom": "18.2.0",
"react-redux": "^8.0.5",
"redux-persist": "^6.0.0",
"redux-thunk": "^2.4.2"
}
}
Step 14 Run the following commands
npm i
npm run dev
Summary
In this article, we learned how to create the next project of show data from Redux and set Redux in Next Js.