Redux ------------Crate

 ============Install===================

npm install @reduxjs/toolkit react-redux

create folder stucture

===================Reducer.js==========

import {createSlice} from "@reduxjs/toolkit";

const studentInitSate={
    students:[],//array
    name:'Sabir s',
    isClose:false,
    contact:null//int
}

const studentSlice=createSlice({
   name:"student",
   initialState:studentInitSate,
   reducers:{
       addStudent:(state,action)=>{
           state.students.push(action.payload);
       },
       removeStudent:(state,action)=>{
           state.students.splice(action.payload,1);
       },
       popStudent:(state,action)=>{
           state.students.pop();
       },
       setName:(state,action)=>{
           state.name=action.payload;
       },
       setContact:(state,action)=>{
           state.contact=action.payload;
       },
       toggleButton:(state,action)=>{
           state.isClose=!state.isClose;
       }

   }
});

export const {addStudent,
    removeStudent,
    popStudent,
    setName,
    setContact,
    toggleButton}=studentSlice.actions;

export default studentSlice.reducer;

 

===================Store.js==========

import {configureStore} from "@reduxjs/toolkit";
import studentSlice from "../Reducer/Reducer";
export const ReduxStore=configureStore({
    reducer:{
        student:studentSlice,

    }
});

===================Index.js==========

//====================
import {Provider} from "react-redux";
import  {ReduxStore} from "./Redux/Store/Store";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // <React.StrictMode>
  //   <App />
  // </React.StrictMode>

    <Provider store={ReduxStore}>
        <App />
    </Provider>

);

==============Display.js ============

import {useSelector,useDispatch} from "react-redux";
import "bootstrap-icons/font/bootstrap-icons.css";
import "bootstrap/dist/css/bootstrap.min.css";
import {removeStudent} from "../Redux/Reducer/Reducer";

export default function () {
    const dispatch=useDispatch();
    const studentObj=useSelector((state)=>state.student);

    return <>
       <h1>Display</h1>
        <h1>Name:{studentObj.name}</h1>
        <h1>isClose:{studentObj.isClose.toString()}</h1>
        <h1>contact:{studentObj.contact}</h1>

        <table className={"table "}>
            <thead className={"bg-dark"}>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Class</th>
                    <th>Marks</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
            {studentObj.students.map((item, index) => (
                <tr key={`Row${index}`}>
                    <td>{index + 1}</td>
                    <td>{item.Name}</td>
                    <td>{item.Class}</td>
                    <td>{item.Marks}</td>
                    <td>
                        <button onClick={(e)=>dispatch(removeStudent(index))} 
                                className={"btn btn-danger"}>Delete</button>
                    </td>
                </tr>
            ))}
            </tbody>

        </table>

    </>
}

==============Datainput.js ============

import {useDispatch,useSelector} from "react-redux";
import {addStudent, popStudent, setContact, setName, toggleButton} from "../Redux/Reducer/Reducer";
import React,{useState} from "react";
export default function () {

    const studentObj=useSelector((state)=>state.student);
    const dispatch=useDispatch();

    //===========================
    const [studentName,setStudentName]=useState('');
    const [studentClass,setStudentClass]=useState('');
    const [studentMarks,setStudentMarks]=useState('');


    //=========Set Name====
    function SetName(event) {
        dispatch(setName(event.target.value));
    }

    function SetContact(event) {
        dispatch(setContact(event.target.value));
    }

    function toggale() {
        dispatch(toggleButton());
    }

    function Submit() {
        dispatch(addStudent({
            Name:studentName,
            Class:studentClass,
            Marks:studentMarks
        }));
        setStudentName('');
        setStudentClass('');
        setStudentMarks('');

    }
    function D() {
        alert('test')
    }
    return <>
        <div className={"m-3"}>
            <input className={"form-control mb-2"}   onChange={SetName} placeholder={"Input Name"}/>
            <input className={"form-control mb-2"}  onChange={SetContact} placeholder={"Input Contact"}/>
            <button onClick={toggale}  className={"btn btn-primary"}>{
                !studentObj.isClose?"On":"Off"
            }</button>

            <hr/>

            <h1>Student Info</h1>
            <div className={"card p-3 m-3"}>
                <input value={studentName} className={"form-control mb-2"} onChange={(e)=>setStudentName(e.target.value)} placeholder={"Input Student Name"}/>
                <input value={studentClass} className={"form-control mb-2"} onChange={(e)=>setStudentClass(e.target.value)} placeholder={"Input Student Class"}/>
                <input value={studentMarks} className={"form-control mb-2"} type={"number"} onChange={(e)=>setStudentMarks(e.target.value)} placeholder={"Input Student Marks"}/>
                <div className="d-flex justify-content-center">
                    <button onClick={Submit} className={"btn btn-success"}>Submit</button>
                </div>
                <div className="mt-2 d-flex justify-content-center">
                    <button onClick={(e)=>dispatch(popStudent())} className="btn btn-danger">Delete Last Row</button>
                </div>
            </div>

        </div>
    </>
}