Store

Le store est le conteneur central unique qui détient l’intégralité de l’arbre d’état (state tree) d’une application Redux. C’est un objet JavaScript qui expose des méthodes pour accéder à l’état, le modifier et réagir à ses changements. Il est l’épine dorsale de la gestion d’état dans une architecture Redux.

Principes fondamentaux :

  • Source de vérité unique : L’état global de toute l’application est stocké dans un seul objet, ce qui simplifie le débogage et facilite la sérialisation pour des fonctionnalités comme le « time-travel »  .
  • Immuabilité et flux unidirectionnel : L’état ne peut pas être modifié directement. La seule façon de le changer est d’émettre (dispatcher) une action, un objet décrivant ce qui s’est passé. Le store transmet cette action au réducteur (reducer) qui calcule de manière pure et immutable le prochain état  .

Les méthodes principales du store

Le store expose quatre méthodes essentielles qui définissent son interface  :

MéthodeDescriptionRôle
getState()Retourne la valeur actuelle de l’état global. C’est un instantané de l’état à un instant T  .Permet à un composant de « lire » les données du store.
dispatch(action)La seule manière de mettre à jour l’état. Elle envoie un objet action au réducteur, qui calcule le nouvel état de manière synchrone  .Permet de modifier l’état en réponse à une interaction utilisateur ou un événement.
subscribe(listener)Ajoute une fonction d’écoute qui est appelée à chaque fois qu’une action est dispatchée et que l’état a potentiellement changé  .Permet de réagir aux changements d’état, par exemple pour mettre à jour l’interface utilisateur.
replaceReducer(nextReducer)Méthode avancée permettant de remplacer le réducteur principal du store. Principalement utilisée pour le code splitting ou les rechargements à chaud (hot reloading)  .Utilisée pour des optimisations avancées.

Comment Créer un Store ? (La pratique moderne)

Bonnes pratiques actuelles : la méthode historique createStore est dépréciée. La documentation officielle recommande d’utiliser configureStore de Redux Toolkit, qui l’enrobe et offre une configuration par défaut optimisée (notamment l’intégration automatique du middleware Redux Thunk et des Redux DevTools)  .

Exemple de création :

javascript

import { configureStore } from '@reduxjs/toolkit'
import postsReducer from './features/posts/postsSlice'

// ConfigureStore crée un store avec une configuration par défaut
const store = configureStore({
  reducer: {
    posts: postsReducer, // Les réducteurs définissent la forme de l'état
  },
})

export default store

À ne pas oublier : Le store doit être fourni à l’application React via le composant <Provider> de react-redux, afin de le rendre accessible à tous les composants.

À retenir pour votre lexique

Ne pas importer le store directement : Il est préférable de passer par le <Provider> pour faciliter les tests et l’isolation, notamment pour le rendu serveur 

Un seul store par application : c’est le pattern recommandé. La séparation des données se fait au niveau des réducteurs, pas au niveau des stores  .

Le store n’est pas une classe : c’est un simple objet avec des méthodes.

Explorer les thématiques : React
Les contenus de définition restent publics. Les ressources (outils, grilles, supports) liées à cette fiche sont disponibles dans l’espace membre.

Plus de publications