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
| Aspect | Description |
|---|---|
| Complexité de mise en œuvre | Redux exige une configuration initiale pour gérer l’état. |
| Nombre de dépendances | Besoin de react-redux et redux-toolkit pour l’intégration. |
| Gestion de données | Utilisation du Store pour centraliser l’état global. |
| Performance | Amélioration des performances avec des données partagées. |
| Facilité de maintenance | Structure claire grâce aux actions et reducers. |
| Portabilité | Code de gestion des données facilement transférable entre projets. |
| Styles de pagination | Options pour défilement infini ou barre de pagination. |
| Modularité | Possibilité d’ajouter plusieurs formats de pagination selon les besoins. |
| Approche alternative | Context 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.
