Redux : qu'est-ce que c'est, modèle de gestion d'état dans React Native
Redux est un conteneur prévisible de gestion d'état pour les applications JavaScript, créé par Dan Abramov en 2015. Redux implémente un flux de données unidirectionnel basé sur l'architecture Flux : l'état est stocké dans un seul Store, modifié uniquement par des fonctions Reducer pures et initié via Action avec Dispatch. Selon npm Trends, Redux maintient plus de 7 millions de téléchargements hebdomadaires, restant la norme pour la gestion d'état dans React Native et les applications web.
Points clés
- Store — la source unique de vérité, stockant tout l'arbre d'état de l'application
- Action — un objet avec le champ type, décrivant l'intention de modifier l'état
- Reducer — une fonction pure (prevState, action) => newState sans effets secondaires
- Dispatch — la méthode du Store pour envoyer une Action au Reducer
- Middleware — une couche entre dispatch et reducer pour les opérations asynchrones et la journalisation
Qu'est-ce que Redux ?
Redux est un modèle architectural et une bibliothèque de gestion d'état, basé sur trois principes : source unique de vérité, état en lecture seule et modifications via des fonctions pures. Contrairement au MVC, où le modèle peut modifier l'état de manière imprévisible, Redux garantit le déterminisme : avec les mêmes données d'entrée, le résultat est toujours le même.
Redux s'inspire de l'architecture Flux de Facebook et du langage Elm. La principale différence avec Flux est un Store unique au lieu de plusieurs. Dans Redux, tout l'état de l'application — objets, tableaux, indicateurs de chargement — est stocké dans un seul arbre. Cela simplifie le débogage, les tests et le débogage par voyage dans le temps. Le développeur peut sauvegarder tout le Store, rejouer une séquence d'Actions et voir comment l'état a changé à chaque étape.
Selon l'enquête State of JS 2025, 68% des répondants utilisant la gestion d'état choisissent Redux ou Redux Toolkit. L'outil est pris en charge par tous les frameworks modernes : React, React Native, Angular, Vue et même le JavaScript vanilla sans framework.
Flux de données unidirectionnel
Le flux de données unidirectionnel est le principe clé de Redux, où les données se déplacent strictement dans une direction : View → Action → Dispatch → Reducer → Store → View. Aucun composant ne peut modifier le Store directement. Une View s'abonne uniquement aux changements via useSelector ou connect et initie les modifications via dispatch.
Cycle de travail de Redux : l'utilisateur clique sur un bouton → le composant appelle dispatch({ type: 'INCREMENT' }) → le Store transmet l'Action au Root Reducer → le Reducer calcule un nouvel état → le Store notifie les abonnés → la View se réaffiche avec les nouvelles données. Ce cycle garantit que chaque modification a une cause explicite sous la forme d'une Action spécifique.
DevTools — un outil intégré à Redux pour surveiller chaque Action, l'état du Store et le temps d'exécution. Le développeur voit la liste de toutes les Actions dispatchées, la différence d'état (diff) avant et après, et peut revenir à n'importe quel état précédent. Cela rend le débogage des états complexes des dizaines de fois plus rapide par rapport à la journalisation conventionnelle.
Composants clés de Redux
Store — un objet contenant l'arbre d'état complet de l'application. Créé via configureStore (RTK) ou createStore. Store fournit trois méthodes : getState() pour la lecture, dispatch(action) pour la modification et subscribe(listener) pour l'abonnement. Dans Redux Toolkit, Store inclut déjà le middleware, DevTools et la prise en charge des slices.
TypeScript
import { configureStore } from '@reduxjs/toolkit'
interface CounterState {
value: number
}
const initialState: CounterState = { value: 0 }
function counterReducer(
state = initialState,
action: { type: string }
): CounterState {
switch (action.type) {
case 'INCREMENT':
return { value: state.value + 1 }
default:
return state
}
}
const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }Action et Action Creator — une Action est un objet avec le champ obligatoire type (une constante chaîne) et un payload optionnel (données). Un Action Creator est une fonction qui retourne une Action. Dans Redux Toolkit, createAction est utilisé pour générer des Actions avec typage automatique.
Reducer — une fonction pure qui reçoit l'état actuel et une Action, retournant un nouvel état. Un Reducer ne doit pas : muter l'état (un nouvel objet est retourné), appeler des API, générer des nombres aléatoires ou accéder à Date. L'immuabilité est assurée par l'opérateur de décomposition ... ou Immer (intégré à RTK).
| Composant | Responsabilité | Contraintes |
|---|---|---|
| Store | Stockage de l'état, dispatch, subscribe | Un par application |
| Action | Description de l'intention de modifier l'état | Doit avoir type |
| Reducer | Calcul du nouvel état | Fonction pure, sans effets secondaires |
| Dispatch | Envoi de l'Action au Reducer | Synchrone par défaut |
| Selector | Extraction des données du Store | Mémoïsation via createSelector |
Middleware et Redux Thunk
Middleware est une chaîne de fonctions insérée entre l'appel dispatch et le moment où l'Action atteint le Reducer. Chaque middleware reçoit l'API du Store et peut journaliser, modifier, retarder ou annuler des Actions. Redux Thunk est le middleware standard pour les opérations asynchrones, permettant de dispatcher des fonctions au lieu d'objets.
JavaScript
import { createAsyncThunk } from '@reduxjs/toolkit'
export const fetchUser = createAsyncThunk(
'users/fetchById',
async (userId: number, { rejectWithValue }) => {
const response = await fetch(`/api/users/${userId}`)
if (!response.ok)
return rejectWithValue('Failed to fetch')
return await response.json()
}
)Middlewares populaires : Redux Thunk — pour les appels asynchrones simples, Redux Saga — pour les scénarios complexes avec des sagas génératrices (debounce, race, requêtes parallèles), Redux Observable — basé sur RxJS pour les flux réactifs. Dans Redux Toolkit, le middleware est connecté via le paramètre middleware dans configureStore.
Selon l'enquête State of JS 2025, Thunk est utilisé dans 72% des projets Redux, Saga dans 18% et Observable dans 5%. Pour la plupart des applications, une combinaison de Thunk + RTK Query suffit pour couvrir 95% des flux de travail asynchrones avec des données.
Redux Toolkit et RTK Query
Redux Toolkit (RTK) est la manière officielle et recommandée d'écrire la logique Redux, publiée en 2019. RTK inclut configureStore, createSlice, createAsyncThunk et createEntityAdapter, réduisant le code boilerplate de Redux de 60 à 70 %. Au lieu de créer manuellement des Action Creators, des Reducers et des types, un seul createSlice est utilisé.
TypeScript
import { createSlice, PayloadAction } from '@reduxjs/toolkit'
const counterSlice = createSlice({
name: 'counter',
initialState: { value: 0 },
reducers: {
increment(state) { state.value += 1 },
incrementByAmount(state, action: PayloadAction<number>) {
state.value += action.payload
}
}
})
export const { increment, incrementByAmount } = counterSlice.actions
export default counterSlice.reducerRTK Query est une solution intégrée pour travailler avec des API basée sur Redux Toolkit. Elle permet de définir des endpoints de manière déclarative via createApi avec génération automatique de hooks, mise en cache, invalidation de tags et mises à jour optimistes. RTK Query remplace l'écriture manuelle de Thunk, Reducer et Selector pour chaque requête API.
Entity Adapter — l'utilitaire createEntityAdapter pour normaliser les collections d'entités. Fournit des reducers CRUD intégrés, des sélecteurs et un tri pour les tableaux d'objets. Si le Store contient des listes d'utilisateurs, de produits ou de commandes — Entity Adapter réduit le code du reducer de 80%.
Redux dans React Native
React Native Redux est la stack standard pour les applications mobiles en JavaScript. Redux s'intègre via Provider de react-redux, enveloppant le composant racine de l'application. Les hooks useSelector et useDispatch donnent aux composants accès à l'état sans props drilling. Persist — redux-persist sauvegarde le Store dans AsyncStorage ou MMKV, restaurant l'état après le redémarrage de l'application.
Middleware pour React Native : redux-flipper pour le débogage via Flipper, redux-observable pour les flux réactifs avec des pilotes natifs, react-native-mmkv pour un stockage persistant rapide. Le plugin de navigation redux-first-router connecte les écrans au Store, permettant de restaurer l'état de l'écran lors du retour.
Dans React Native, Redux est utilisé avec une stratégie network-first : l'application tente d'abord de charger les données depuis le serveur, puis les met en cache dans le Store via RTK Query ou redux-persist. Le mode hors ligne est réalisé en combinant Redux + NetInfo + une file d'attente d'Actions pour les renvoyer lors de la restauration de la connexion.
Questions fréquentes
En quoi Redux diffère-t-il de Context API dans React ?
Redux est une solution complète avec Store, DevTools, Middleware et état immuable. Context API est un mécanisme intégré de React pour passer des données sans props drilling. Context est adapté aux thèmes globaux et à la localisation, tandis que Redux est destiné aux états complexes avec opérations asynchrones, mise en cache et débogage. Dans les grandes applications, Context provoque des réaffichages inutiles, tandis que Redux avec des sélecteurs résout ce problème.
Qu'est-ce qu'Immer dans Redux Toolkit ?
Immer est une bibliothèque de gestion d'état immuable, intégrée à Redux Toolkit. Immer permet d'écrire des reducers comme si on mutait l'état directement : state.value += 1. Sous le capot, Immer crée un objet proxy (draft), suit les modifications et retourne un nouvel objet immuable. Cela réduit le volume de code du reducer de 50% et élimine les mutations accidentelles.
Comment tester Redux ?
La logique Redux est testée isolément : Reducer — une fonction pure, il suffit de l'appeler avec différentes Actions et de vérifier le résultat. Action Creator — vérifier l'objet retourné. Thunk — simuler l'API, appeler dispatch et vérifier quelles Actions ont été dispatchées. Composant avec useSelector — utiliser Provider avec un Store de test dans le renderer. Redux DevTools aident à écrire des tests en rejouant une séquence d'Actions d'une session réelle.
Quand utiliser Redux plutôt que useState ?
useState est suffisant pour l'état local d'un seul composant : texte de champ, ouverture/fermeture de modale. Redux est nécessaire lorsque l'état est partagé entre plusieurs écrans, nécessite une synchronisation asynchrone (données du serveur), doit persister entre les redémarrages de l'application (persist) ou nécessite un débogage par voyage dans le temps. Pour les petites applications, Redux est excessif — utilisez plutôt Context + useReducer.
Qu'est-ce que la normalisation dans Redux ?
Normalizr est une bibliothèque pour normaliser les données imbriquées en une structure Store plate. Au lieu de stocker des objets profonds comme user.posts[0].comments, la normalisation crée des dictionnaires : entities.users, entities.posts, entities.comments avec des références par ID. Cela simplifie la mise à jour d'une seule entité partout et accélère les sélecteurs. Redux Toolkit recommande des données normalisées pour les modèles complexes.
Résumé
- Redux — un conteneur d'état prévisible avec un seul Store et des Reducers purs
- Action — un objet avec type, Reducer — une fonction pure, Dispatch — le mécanisme d'envoi
- Redux Toolkit — l'API officielle avec createSlice, createAsyncThunk et RTK Query
- Middleware — une couche pour l'asynchronicité : Thunk, Saga, Observable
- React Native s'intègre via Provider, useSelector et redux-persist pour le mode hors ligne
- DevTools — débogage par voyage dans le temps avec relecture de chaque Action
- Normalizr — normalisation des données pour des sélecteurs et mises à jour efficaces
Nous développerons une application mobile clé en main
IT Sectr crée des applications iOS et Android pour les startups et les entreprises depuis 2017. Nous vous conseillerons et vous proposerons la meilleure solution.
Lisez aussi