Page count changes

src/components/leftSidebar/index.jsx

 import React, { useEffect, useState } from "react";
-import { fetchReportees, setViewReportee } from "../../redux/reducers/reporteesSlice";
+import { fetchReportees, setViewReportee, setCurrPage, setPagesCount } from "../../redux/reducers/reporteesSlice";
 import { Link } from "react-router-dom";
 import { useSelector, useDispatch } from "react-redux";
 import { useParams } from "react-router-dom";
@@ -9,10 +9,8 @@ import PaginationComponent from "../Pagenation/Pagenation";
 
 function LeftSidebar() {
   const dispatch = useDispatch();
-  const [currPage, setCurrPage] = useState(1);
-  const [pagesCount, setPagesCount] = useState(1);
   const [inputValue, setInputValue] = useState(null);
-  const { reportees, loading, viewReportee, totalCount } = useSelector((state) => state.reportees);
+  const { reportees, loading, viewReportee, totalCount, currPage, pagesCount } = useSelector((state) => state.reportees);
   const userDetails = useSelector((state) => state.userDetails);
 
 
@@ -38,7 +36,7 @@ function LeftSidebar() {
   };
 
   useEffect(() => {
-    setPagesCount(Math.ceil((totalCount) / (10)))
+    dispatch(setPagesCount(Math.ceil((totalCount) / (10))))
   }, [totalCount])
 
   const handlePageChange = (currPage) => {
@@ -47,7 +45,7 @@ function LeftSidebar() {
       page: currPage,
       perPage: 10
     }
-    setCurrPage(currPage)
+    dispatch(setCurrPage(currPage))
     dispatch(fetchReportees(data))
   }
 

src/pages/dashboard/index.jsx

 import React, { useEffect, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { useDispatch, useSelector } from "react-redux";
-import { fetchReportees, setViewReportee } from "../../redux/reducers/reporteesSlice";
+import { fetchReportees, setViewReportee, setCurrPage, setPagesCount } from "../../redux/reducers/reporteesSlice";
 import Table from '../../components/table';
 import RightArrowIcon from '../../assets/icons/rightArrowIcon';
 import { scoreColor } from '../../utils/commonFunctions';
@@ -10,11 +10,9 @@ import PaginationComponent from "../../components/Pagenation/Pagenation";
 function Dashboard() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { reportees, loading, totalCount } = useSelector((state) => state.reportees);
+  const { reportees, loading, totalCount, currPage,  pagesCount} = useSelector((state) => state.reportees);
   const userDetails = useSelector((state) => state.userDetails);
   const [reporteIds, setReporteIds] = useState([]);
-  const [currPage, setCurrPage] = useState(1)
-  const [pagesCount, setPagesCount] = useState(1);
   const [inputValue, setInputValue] = useState('');
 
   //  userDetails.user.reportees || [];
@@ -24,13 +22,13 @@ function Dashboard() {
       page: currPage,
       perPage: 10
     }
-    setCurrPage(currPage)
+    dispatch(setCurrPage(currPage))
     dispatch(fetchReportees(data))
   }
 
 
   useEffect(() => {
-    setPagesCount(Math.ceil((totalCount) / (10)))
+    dispatch(setPagesCount(Math.ceil((totalCount) / (10))))
   }, [totalCount])
 
   useEffect(() => {

src/redux/reducers/reporteesSlice.js

@@ -8,6 +8,8 @@ const initialState = {
   totalCount:0,
   loading: false,
   error: null,
+  currPage:1,
+  pagesCount:1
 };
 
 export const fetchReportees = createAsyncThunk("getreportees", async (data) => {
@@ -35,6 +37,12 @@ const reporteesSlice = createSlice({
             viewReportee: reportee
           }
         }
+    },
+    setCurrPage: (state, action) => {
+      state.currPage = action.payload
+    },
+    setPagesCount: (state, action) => {
+      state.pagesCount = action.payload
     }
   },
   extraReducers: (builder) => {
@@ -56,6 +64,6 @@ const reporteesSlice = createSlice({
   },
 });
 
-export const {resetReportees,setViewReportee} = reporteesSlice.actions;
+export const {resetReportees,setViewReportee, setCurrPage, setPagesCount} = reporteesSlice.actions;
 
 export default reporteesSlice.reducer;