useReducer |
Utilise le réducteur |
|---|---|
| React | |
Syntaxe
| const [state, dispatch] = useReducer(reducer, initialArg, init?) |
useReducer est un crochet React vous permettant d'ajouter un réducteur à votre composante.
Référence
| useReducer(reducer, initialArg, init?) |
Appelez useReducer au niveau supérieur de votre composant pour gérer son état avec un réducteur.
Paramètres
| Nom | Description |
|---|---|
| reducer | Fonction de réduction spécifiant la mise à jour de l'état. Elle doit être pure, prendre l'état et l'action comme arguments et renvoyer l'état suivant. L'état et l'action peuvent être de n'importe quel type. |
| initialArg | Valeur à partir de laquelle l'état initial est calculé. Il peut s'agir d'une valeur de n'importe quel type. Le calcul de l'état initial dépend du paramètre init suivant. |
| init | facultatif : Fonction d'initialisation renvoyant l'état initial. Si elle n'est pas spécifiée, l'état initial est défini sur initialArg. Sinon, l'état initial est défini sur le résultat de l'appel à init(initialArg). |
Renvoie
useReducer renvoie un tableau contenant exactement deux valeurs :
- L'état actuel. Lors du premier rendu, il est défini sur init(initialArg) ou initialArg (en l'absence d'initialisation).
- La fonction de répartition qui permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu.
Mises en garde
useReducer est un crochet ; vous ne pouvez donc l'appeler qu'au niveau supérieur de votre composant ou de vos propres crochets. Vous ne pouvez pas l'appeler à l'intérieur de boucles ou de conditions. Si nécessaire, extrayez une nouvelle composante et déplacez-y l'état.
La fonction dispatch possède une identité stable ; vous la verrez donc souvent omise des dépendances d'effets, mais son inclusion ne déclenchera pas l'effet. Si le linter vous permet d'omettre une dépendance sans erreur, vous pouvez le faire en toute sécurité. En savoir plus sur la suppression des dépendances d'effets.
En mode strict, React appellera votre réducteur et votre initialiseur deux fois afin de vous aider à détecter les impuretés accidentelles. Ce comportement est réservé au développement et n'affecte pas la production. Si votre réducteur et votre initialiseur sont purs (comme ils devraient l'être), cela ne devrait pas affecter votre logique. Le résultat de l'un des appels est ignoré.
Fonction dispatch
La fonction dispatch renvoyée par useReducer vous permet de mettre à jour l'état avec une valeur différente et de déclencher un nouveau rendu. Vous devez passer l'action comme seul paramètre à la fonction de répartition :
- const [state, dispatch] = useReducer(reducer, { age: 42 });
-
- function handleClick() {
- dispatch({ type: 'incremented_age' });
- // ...
React définira l'état suivant sur le résultat de l'appel de la fonction de réduction fournie avec l'état actuel et l'action transmise à dispatch.
Paramètres
| Nom | Description |
|---|---|
| action | L'action effectuée par l'utilisateur. Il peut s'agir d'une valeur de n'importe quel type. Par convention, une action est généralement un objet identifié par une propriété de type et, éventuellement, par d'autres propriétés contenant des informations supplémentaires. |
Renvois
Les fonctions dispatch n'ont pas de valeur de retour.
Mises en garde
- La fonction dispatch ne met à jour la variable d'état que pour le prochain rendu. Si vous lisez la variable d'état après avoir appelé la fonction dispatch, vous obtiendrez toujours l'ancienne valeur affichée à l'écran avant votre appel.
- Si la nouvelle valeur fournie est identique à l'état actuel, tel que déterminé par une comparaison Object.is, React ignorera le nouveau rendu du composant et de ses enfants. Il s'agit d'une optimisation. React peut encore avoir besoin d'appeler votre composant avant d'ignorer le résultat, mais cela ne devrait pas affecter votre code.
- React effectue les mises à jour d'état par lots. Il met à jour l'écran une fois que tous les gestionnaires d'événements ont été exécutés et ont appelé leurs fonctions set. Cela évite les rendus multiples lors d'un même événement. Dans les rares cas où vous devez forcer React à mettre à jour l'écran plus tôt, par exemple pour accéder au DOM, vous pouvez utiliser flushSync.
Utilisation
- Ajout d'un réducteur à une composante
- Appelez useReducer au niveau supérieur de votre composant pour gérer l'état avec un réducteur.
useReducer renvoie un tableau contenant exactement deux éléments :
- L'état actuel de cette variable d'état, initialement défini sur l'état initial que vous avez fourni.
- La fonction dispatch vous permettant de la modifier en réponse à une interaction.
Pour mettre à jour l'affichage à l'écran, appelez dispatch avec un objet représentant l'action de l'utilisateur, appelé action :
- function handleClick() {
- dispatch({ type: 'incremented_age' });
- }
React transmettra l'état actuel et l'action à votre fonction de réduction. Votre réducteur calculera et renverra l'état suivant. React entreposera cet état, affichera votre composant avec et mettra à jour l'interface utilisateur.