How to implement pagination in React Redux Applications?

// src/redux/store.js
 
import { configureStore } from '@reduxjs/toolkit';
import todosReducer from './todoSlice';
 
const store = configureStore({
    reducer: {
        todos: todosReducer,
    },
});
 
export default store;

// src/redux/userSlice.js

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Define the number of items per page
const ITEMS_PER_PAGE = 10; 

// Define an initial state for pagination
const initialPaginationState = {
    currentPage: 1,
    totalPages: 1,
    totalItems: 0
};

export const fetchTodos = createAsyncThunk(
    'todos/fetchTodos',
    // Adjust the thunk to use pagination parameters
    async (_, { getState }) => { 
        try {
            const { currentPage } = getState().todos.pagination;
            const start = (currentPage - 1) * ITEMS_PER_PAGE;
            const response = await fetch(
`https://jsonplaceholder.typicode.com/todos?_start=${start}&_limit=${ITEMS_PER_PAGE}`);
            if (!response.ok) {
                throw new Error('Failed to fetch todos');
            }
            const totalCountHeader = response.headers.get('x-total-count');
            const totalItems = 
                totalCountHeader ? 
                    parseInt(totalCountHeader, 10) : 0;
            const todos = await response.json();
            return { todos, totalItems };
        } catch (error) {
            throw new Error('Error fetching todos');
        }
    }
);

const todosSlice = createSlice({
    name: 'todos',
    initialState: {
        data: [],
        loading: false,
        error: null,
        pagination: initialPaginationState 
        // Include pagination state in initial state
    },
    reducers: {
        // Add a reducer to update current page
        setCurrentPage: (state, action) => { 
            state.pagination.currentPage = action.payload;
        }
    },
    extraReducers: (builder) => {
        builder
            .addCase(fetchTodos.pending, (state) => {
                state.loading = true;
                state.error = null;
            })
            .addCase(fetchTodos.fulfilled, (state, action) => {
                state.loading = false;
                state.data = action.payload.todos;
                state.pagination.totalItems = action.payload.totalItems;
                state.pagination.totalPages = 
                    Math.ceil(action.payload.totalItems / ITEMS_PER_PAGE);
            })
            .addCase(fetchTodos.rejected, (state, action) => {
                state.loading = false;
                state.error = action.error.message;
            });
    },
});

// Export setCurrentPage action
export const { setCurrentPage } = todosSlice.actions; 

export default todosSlice.reducer;

// src/App.js

import React,
{
    useEffect
} from 'react';
import {
    useDispatch,
    useSelector
} from 'react-redux';
import { fetchTodos, setCurrentPage } from './redux/todoSlice';
import './App.css';
import Loader from './components/Loader';

function App() {
    const dispatch = useDispatch();
    const todos = useSelector((state) => state.todos);

    const randomLightColor = () => {
        const randomColor =
            () =>
                Math.floor(Math.random() * 200) + 56;
        return `rgb(${randomColor()}, ${randomColor()}, ${randomColor()})`;
    };

    useEffect(() => {
        dispatch(fetchTodos());
    }, [dispatch]);
    // Fetch todos on component mount

    const handlePrevPage = () => {
        if (todos.pagination.currentPage > 1) {
            dispatch(setCurrentPage(todos.pagination.currentPage - 1));
            dispatch(fetchTodos());
        }
    };

    const handleNextPage = () => {
        if (todos.pagination.currentPage < todos.pagination.totalPages) {
            dispatch(setCurrentPage(todos.pagination.currentPage + 1));
            dispatch(fetchTodos());
        }
    };

    return (
        <div className="container">
            <div className='top'>
                <h1 className='top-text'>GFG Todo Display App</h1>
            </div>
            <div className='top'>
                {todos.loading && <p className="loading"><Loader /></p>}
                <div className="todos-list">
                    {todos.data?.map((todo) => (
                        <div className='cards'
                            style={{backgroundColor:randomLightColor()}}
                            key={todo.id}>{todo.title}</div>
                    ))}
                </div>
                <div className="pagination">
                    <button className="pagination-button"
                        onClick={handlePrevPage}
                        disabled={todos.pagination.currentPage === 1}>
                        prev
                    </button>
                    <span className="pagination-info">
                        Page {todos.pagination.currentPage}
                        of {todos.pagination.totalPages}
                    </span>
                    <button className="pagination-button"
                        onClick={handleNextPage}
                        disabled={todos.pagination
                                       .currentPage === todos.pagination
                                                                .totalPages}>
                        next
                    </button>
                </div>
            </div>
        </div>
    );
}

export default App;

// src/index.js
 
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import store from './redux/store';
 
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <Provider store={store}>
        <App />
    </Provider>
);

// src/components/Loader.js

import React from 'react'

const Loader = () => {
    return (
        <div className='loader'></div>
    )
}

export default Loader