React n'a pas de guidelines fort sur quel pattern/librairie utiliser pour la gestion d'état
Les pbs qu'on souhaite résoudre avec la gestion d'état globale
lire le state depuis n'importe où dans l'arbre des composants
Deux manières de faire :
en React vanilla (à l'intérieur du "React runtime") : useState, useRef, useReducer combiné avec le contexte React
En dehors de React, dans un module state qui permet de stocker un état proche d'un singleton
Possibilité de mettre à jour le state stocké
Fournir des mécanismes pour optimiser le rendu
Fournir des mécanismes pour optimiser l'utilisation de la mémoire
Si on utilise le cycle de vie React pour le store => plus simple de prendre l'avantage de la "garbage collection" automatique quand le composant unmount.
Pour une lib comme Redux, on a besoin de le faire nous même. La garbage collection ne va pas se faire seule car il va continue d'avoir une référence de mes données.
1ere implémentation du pattern "Flux" qui a été utilisé de manière interne à Facebook
Utilisation d'un seul store (en partie inspiré par l'architecture Elm)
Requiert que toutes les MAJ du state soient immutables
Inconvénients
Pb rencontrés sur les larges applis : "local UI state, remote server cache state, URL state, global shared state, and probably more distinct types of state."
local UI state
le pb rencontré est le prop drilling et fonctions callback pour MAJ la donnée
Prop drilling = quand on passe de la donnée à plusieurs composants enfants, mais que la plupart des composants n'ont pas besoin de cette donnée
pour résoudre cela : patterns de composition de composant et lifting state up
remote server cache state => problèmes de "request de-duplication, retries, polling, handling mutations"
"Server cache is not the same as UI state, and should be handled differently."
Créé un seul énorme store monolithique
Approche actuelle de la gestion de l'état avec React
Depuis l'arrivée de Redux sont arrivés les hooks de React et la nouvelle context API
On peut utiliser l'approche native React pour des applis très simples : useContext, useState, useReducer ; mais pour des applis plus grandes on réinvente la roue (et Redux)
Approche "bottom up" (contrairement à Redux qui était "top down") avec de plus petits "state slices" qui sont consommés à travers des hooks.
Exemple de lib bottom up : Recoil, Jotai (avec un concept de state atomique)
The new wave of React state management (quels sont les problèmes que l'on souhaite résoudre avec la gestion d'état globale, avantages et inconvénients de Redux et approche simplifiée du store)