Mettre en place un système de pagination avec React et Redux

La mise en place d’un système de pagination au sein d’une application web est un aspect crucial pour garantir une expérience utilisateur fluide et agréable. Avec l’utilisation de React et de Redux, il devient possible de gérer efficacement l’état et de diviser les données en segments facilement navigables. Cette approche non seulement optimise le temps de chargement des données, mais permet également de construire une interface utilisateur intuitive. Dans cet article, nous explorerons les étapes clés pour implémenter cette fonctionnalité, tout en mettant en lumière les avantages d’une telle organisation des données.

La pagination est un élément essentiel dans le développement d’applications web qui requièrent un chargement de données volumineux. La capacité à afficher les données par segments améliore non seulement l’expérience utilisateur mais réduit aussi la charge sur le serveur. Dans cet article, nous explorerons la mise en œuvre d’un système de pagination avec React et Redux. Nous allons examiner les différentes étapes de la configuration, y compris le traitement des données, leur affichage et la gestion de l’état.

Comprendre la pagination

La pagination consiste à diviser un ensemble de données en plusieurs pages. Cela permet de ne charger qu’une partie des données à la fois plutôt que de surcharger le navigateur avec toute la base de données. Ce processus est particulièrement utile lorsque l’on travaille avec de grandes collections de données. Au niveau de l’interface utilisateur, la pagination peut prendre plusieurs formes, notamment des boutons « Précédent » et « Suivant », ou des numéros de page cliquables.

Deux méthodes de pagination courantes incluent le défilement infini, où plus d’éléments sont chargés à mesure que l’utilisateur fait défiler, et la barre de pagination, qui permet à l’utilisateur de sélectionner une page spécifique. Pour notre exemple, nous utiliserons la barre de pagination, car elle permet une navigation plus intuitive entre les pages.

Préparation de l’environnement

Avant de commencer la mise en œuvre, nous devons préparer notre environnement de développement. Assurez-vous d’avoir installé React et Redux ainsi que leurs dépendances nécessaires. Vous aurez besoin d’installer react-redux et redux-toolkit via npm pour faciliter la gestion d’état. Une fois que vous avez configuré votre projet, vous devez créer les fichiers nécessaires, tels que les actions, les réducteurs et le store Redux.

Il est essentiel de structurer correctement votre application afin que chaque composant ait un accès facile à l’état global. Cela implique d’entourer le composant racine de votre application avec le <Provider> de react-redux. Ce composant permettra d’accéder à l’état global depuis n’importe quel sous-composant de l’application.

Création des actions et réducteurs

Actions

Dans Redux, une action est un objet JavaScript qui décrit un événement ou une intention de changement d’état. Pour notre pagination, nous devons créer des actions pour charger les données et changer de page. Vous pouvez créer un fichier actions.js dans votre répertoire Redux.

Voici un exemple simple d’une action pour charger des données :

<!– wp:code {"content":"
nexport const LOAD_DATA = 'LOAD_DATA';nexport const CHANGE_PAGE = 'CHANGE_PAGE';nnexport const loadData = (data) => ({n    type: LOAD_DATA,n    payload: data,n});nnexport const changePage = (page) => ({n    type: CHANGE_PAGE,n    payload: page,n});n
« } –>
export const LOAD_DATA = 'LOAD_DATA';
export const CHANGE_PAGE = 'CHANGE_PAGE';

export const loadData = (data) => ({
    type: LOAD_DATA,
    payload: data,
});

export const changePage = (page) => ({
    type: CHANGE_PAGE,
    payload: page,
});

Réducteurs

Les réducteurs sont des fonctions qui prennent l’état actuel et une action, et renvoient un nouvel état. Pour notre application, nous allons créer un réducteur qui gère l’état de notre liste de données ainsi que la page actuelle.

<!– wp:code {"content":"
nconst initialState = {n    data: [],n    currentPage: 1,n    totalPages: 0,n};nnconst reducer = (state = initialState, action) => {n    switch (action.type) {n        case LOAD_DATA:n            return {n                ...state,n                data: action.payload.data,n                totalPages: action.payload.totalPages,n            };n        case CHANGE_PAGE:n            return {n                ...state,n                currentPage: action.payload,n            };n        default:n            return state;n    }n};nnexport default reducer;n
« } –>
const initialState = {
    data: [],
    currentPage: 1,
    totalPages: 0,
};

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case LOAD_DATA:
            return {
                ...state,
                data: action.payload.data,
                totalPages: action.payload.totalPages,
            };
        case CHANGE_PAGE:
            return {
                ...state,
                currentPage: action.payload,
            };
        default:
            return state;
    }
};

export default reducer;

Ce réducteur initialise l’état avec un tableau de données vide, une page actuelle, et un nombre total de pages. Il inclut deux cas pour mettre à jour les données et changer la page actuelle en fonction des actions dispatchées par le composant.

Intégration dans un composant React

Récupérer et afficher les données

Pour afficher les données, nous devons utiliser le hook useSelector pour accéder à notre état global et useDispatch pour envoyer des actions. Commençons par créer un composant qui affiche les données paginées :

<!– wp:code {"content":"
nimport React, { useEffect } from 'react';nimport { useSelector, useDispatch } from 'react-redux';nimport { loadData, changePage } from './actions';nnconst PaginationComponent = () => {n    const dispatch = useDispatch();n    const { data, currentPage, totalPages } = useSelector(state => state);nn    useEffect(() => {n        // ru00e9cupu00e9rer les donnu00e9es de l'APIn        const fetchData = async () => {n            const response = await fetch(`/api/data?page=${currentPage}`);n            const result = await response.json();n            dispatch(loadData(result));n        };n        fetchData();n    }, [currentPage, dispatch]);nn    return (n        
n            
    n                {data.map(item => (n                    
  • {item.name}
    • n                ))}n            
n            
n                n                Page {currentPage} sur {totalPages}n                n            
n        
n    );n};nnexport default PaginationComponent;n
« } –>
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { loadData, changePage } from './actions';

const PaginationComponent = () => {
    const dispatch = useDispatch();
    const { data, currentPage, totalPages } = useSelector(state => state);

    useEffect(() => {
        // récupérer les données de l'API
        const fetchData = async () => {
            const response = await fetch(`/api/data?page=${currentPage}`);
            const result = await response.json();
            dispatch(loadData(result));
        };
        fetchData();
    }, [currentPage, dispatch]);

    return (
        

            
    
                {data.map(item => (
                    
  • {item.name}
    • 
                ))}
            

            

                
                Page {currentPage} sur {totalPages}
                
            

        

    );
};

export default PaginationComponent;

Dans ce composant, nous utilisons un effet pour récupérer les données chaque fois que currentPage est modifié. Les données sont ensuite affichées sous forme de liste et les boutons “Précédent” et “Suivant” permettent à l’utilisateur de naviguer entre les pages.

Gestion de l’utilisateur et amélioration de l’interface

Pour renforcer l’expérience utilisateur, il est important d’informer les utilisateurs quand ils sont à la première ou à la dernière page. Dans le composant, nous avons déjà désactivé les boutons selon la page actuelle. Vous pouvez également envisager d’ajouter des transitions ou animations entre les chargements de données pour que l’utilisateur perçoive moins d’attente.

De plus, vous pourriez utiliser un système de chargement pour indiquer que les données sont en cours de chargement. Cela peut se faire avec une simple condition qui affiche un “Chargement…” pendant que les données sont récupérées depuis l’API.

En utilisant la pagination avec un backend

Backend avec une API

Dans cet exemple, nous avons supposé que les données proviennent d’une API. Il est crucial que l’API soit capable de gérer la pagination en acceptant des paramètres tels que le numéro de page et le nombre d’éléments à renvoyer par page. Par exemple, une requête pourrait ressembler à ceci : `/api/data?page=1&limit=14`, où `limit` spécifie le nombre d’éléments par page.

La réponse de l’API devrait alors contenir non seulement les données demandées, mais aussi le total des pages disponibles pour permettre la navigation correcte. Cela améliore l’efficacité en limitant le volume de données récupéré à chaque appel.

Exemple d’intégration

Si vous utilisez une API RESTful, envisagez de structurez vos routes pour traiter les paramètres de pagination facilement. Par exemple, dans le contrôleur de votre API, vous devrez calculer les données à renvoyer en fonction de l’index de départ dérivé du numéro de page et du limite d’éléments.

Voici un exemple dans un contrôleur Express :

<!– wp:code {"content":"
napp.get('/api/data', (req, res) => {n    const page = parseInt(req.query.page) || 1;n    const limit = parseInt(req.query.limit) || 14;n    const startIndex = (page - 1) * limit;n    const endIndex = page * limit;nn    const results = dataList.slice(startIndex, endIndex);n    const totalPages = Math.ceil(dataList.length / limit);nn    res.json({n        data: results,n        totalPages: totalPages,n    });n});n
« } –>
app.get('/api/data', (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = parseInt(req.query.limit) || 14;
    const startIndex = (page - 1) * limit;
    const endIndex = page * limit;

    const results = dataList.slice(startIndex, endIndex);
    const totalPages = Math.ceil(dataList.length / limit);

    res.json({
        data: results,
        totalPages: totalPages,
    });
});

Avec cela, vous serez en mesure de récupérer uniquement les données nécessaires pour constituer une page tout en maintenant une gestion efficace et structurée des données côté serveur.

Mise en place d’un système de pagination avec React et Redux

AspectDescription
Complexité de mise en œuvreRedux exige une configuration initiale pour gérer l’état.
Nombre de dépendancesBesoin de react-redux et redux-toolkit pour l’intégration.
Gestion de donnéesUtilisation du Store pour centraliser l’état global.
PerformanceAmélioration des performances avec des données partagées.
Facilité de maintenanceStructure claire grâce aux actions et reducers.
PortabilitéCode de gestion des données facilement transférable entre projets.
Styles de paginationOptions pour défilement infini ou barre de pagination.
ModularitéPossibilité d’ajouter plusieurs formats de pagination selon les besoins.
Approche alternativeContext API et useReducer comme solutions légères.

Mise en place d’un système de pagination avec React et Redux

La réalisation d’un système de pagination efficace avec React et Redux est essentielle pour optimiser l’expérience utilisateur lors de l’affichage de grandes quantités de données. En organisant les recherches de manière segmentée, les utilisateurs peuvent naviguer aisément à travers de larges ensembles d’informations sans être submergés. Ce processus repose sur l’interaction entre le back-end et le front-end, notamment à travers l’utilisation de gemmes telles que wil_paginate pour le traitement côté serveur et la bibliothèque react-paginate pour la gestion de l’affichage côté client.

Pour mettre en place cette structure de pagination, il est crucial de s’assurer que le nombre d’éléments par page est bien défini et que chaque changement de page déclenche la récupération des nouvelles données depuis le serveur. Utiliser le hook useEffect dans React pour efficacement interfacer avec Redux permet d’associer les changements d’état des données à une interface utilisateur réactive. Cette approche fluidifie la navigation et améliore la satisfaction des utilisateurs, facilitant l’accès à l’information.

En combinant la puissance de Redux pour la gestion de l’état avec la flexibilité de React, les développeurs peuvent créer des applications qui se comportent de manière prévisible, rendant la personnalisation et l’ajout de fonctionnalités ultérieures plus simples et moins sujettes à erreur.

Charlotte Blanc.

Graphiste passionnée et formatrice web âgée de 30 ans, j'accompagne les professionnels dans leur montée en compétences digitales. Mon expertise allie créativité et technique pour des projets web accessibles et esthétiques. Enthousiaste à l'idée de partager mes connaissances, je me consacre à rendre le web plus compréhensible et attractif.

Publications similaires

  • Quelle astuce permet de générer des leads B2B avec LinkedIn Sales Navigator ?

    La génération de leads en B2B reste une démarche stratégique incontournable pour les entreprises cherchant à renforcer leur portefeuille clients. Avec l’évolution des technologies et des réseaux sociaux, LinkedIn s’impose comme la plateforme privilégiée des professionnels. En particulier, LinkedIn Sales Navigator offre un ensemble d’outils sophistiqués dédiés à la prospection et à la qualification des…

  • Optimiser le chargement des images avec Next.js et Cloudinary

    Optimiser le chargement des images est essentiel pour améliorer l’expérience utilisateur sur le web. Dans cette optique, Next.js et Cloudinary se présentent comme des outils puissants pour répondre à ce défi. Ce framework moderne, basé sur React, propose des solutions performantes pour gérer les images, tandis que Cloudinary offre des fonctionnalités avancées d’optimisation et de…

  • Quelle méthode pour augmenter ses ventes sur Etsy avec Marmalead ?

    Sur la plateforme Etsy, où les millions de créateurs rivalisent pour capter l’attention des acheteurs, la visibilité est le défi majeur pour tout vendeur. Se démarquer nécessite une stratégie fine et adaptée, s’appuyant sur une analyse pointue des tendances et du comportement des utilisateurs. Dans ce paysage concurrentiel, l’outil Marmalead s’impose comme une ressource incontournable…

  • Intégrer un système de commentaires en temps réel avec Socket.io

    Dans un monde numérique où l’interaction en temps réel est devenue essentielle, intégrer un système de commentaires en temps réel à votre application web est une fonctionnalité cruciale pour améliorer l’engagement utilisateur. Grâce à Socket.IO, une bibliothèque JavaScript performante, vous pouvez créer un flux de discussion instantané qui enrichit l’expérience en ligne. Ce tutoriel vous…