Gestion des états

Certaines applications de boutique en ligne exigent un moyen de gérer l'état global. Il existe de nombreuses bibliothèques de gestion d'état qui vous aident pour cela, comme Redux et MobX. Salesforce ne recommande pas une bibliothèque de gestion d'état particulière plutôt qu'une autre. Vous pouvez d'ailleurs créer une application PWA Kit sans en utiliser.

Vous pouvez toujours fournir des informations d'état à vos composants via les props, mais si vous souhaitez utiliser les fonctionnalités plus avancées de React pour gérer l'état, ce guide couvre également d'autres approches.

La technique la plus simple pour partager l'état entre les composants consiste à fournir ces informations d'état par le biais de props à un composant. Ce composant doit être le parent de tous les composants qui ont besoin d'accéder aux données d'état. Les documentations de React décrivent cette technique en détail et l'appellent lifting state up, soit une remontée de l'état dans la hiérarchie.

L'API Context de React simplifie le processus de mise à disposition de données à un grand nombre de composants, sans avoir à transmettre manuellement ces données grâce à des props à chaque niveau de l'arborescence des composants de votre app.

Voici un exemple d'utilisation de l'API React Context avec un composant qui agit comme une enveloppe (wrapper) autour de tous vos composants afin de leur fournir des données d'état partagées.

Commencez par créer un composant appelé GlobalState possédant deux objets de contexte :

  1. GlobalStateContext : où vous pouvez stocker les données d'état global.
  2. GlobalDispatchContext : votre fonction dispatch, qui renvoie un instantané actualisé de l'état global par le biais d'une fonction reducer.

Chaque objet de contexte est accompagné d'un composant <Provider> qui permet aux composants consommateurs de s'abonner aux changements de contexte. Ici, les objets de contexte sont initialisés avec les props initialState et dispatch. Vous recevez ces props lorsque vous connectez votre état avec un reducer, à l'aide du hook useReducer. Pour en savoir plus sur les hooks React, notamment sur leur utilisation avec l'API Context, consultez la documentation de référence officielle sur les hooks React.

Voici comment définir et initialiser un composant qui utilise l'API Context pour stocker l'état global de votre application de boutique en ligne :

Le composant spécial AppConfig situé dans app/components/_app-config/index.jsx vous permet d'initialiser votre système de gestion des états. Ici, props.children contient tous les composants de votre application ; c'est donc là que vous voulez ajouter votre composant GlobalState.

Pour récupérer l'objet props, vous devez d'abord l'initialiser. Utilisez le hook useReducer de React pour créer un état connecté à votre reducer. La fonction useReducer prend un objet initialState et le reducer importé du composant GlobalState. Ensuite, on passe l'état connecté et une fonction dispatch pour modifier cet état.

Exemple :

Vous pouvez désormais donner à n'importe quel composant l'accès à vos données de contexte global, ainsi que la possibilité de les mettre à jour. Importez GlobalStateContext et GlobalDispatchContext à partir de votre composant GlobalState et fournissez ces objets de contexte à la méthode useContext().

Exemple :

Vous pouvez personnaliser votre application afin d'utiliser une bibliothèque de gestion d'état en remplaçant le composant spécial AppConfig par défaut qui se situe dans app/components/_app-config/index.jsx.

Voici comment configurer Redux pour votre PWA via l'AppConfig interne. Le composant dispose de quatre méthodes que vous devez utiliser :

  1. La méthode restore est celle où vous créez votre store Redux avec un reducer, un état initial et un middleware de votre choix.
  2. La méthode freeze vous permet de figer votre backend de gestion d'état pour l'intégrer dans la page HTML.
  3. La méthode extraGetPropsArgs vous permet de renvoyer tous les arguments supplémentaires que vous souhaitez injecter dans les méthodes getProps dans toute l'application. Dans ce cas, nous pouvons retourner le store Redux comme argument supplémentaire.
  4. La méthode render permet de configurer des fournisseurs de contexte pour une bibliothèque de gestion des états. Par exemple, vous pouvez l'utiliser pour envelopper l'application dans un fournisseur Redux.

Voici un bref exemple d'utilisation des méthodes d'AppConfig pour configurer Redux pour votre application de boutique. Outre les étapes présentées ici, une solution complète exige que vous créiez votre store avec un reducer, un état initial et tout middleware requis.