Comment utiliser le hook useReducer React

Découvrez à quoi sert le hook useReducer React et comment l'utiliser!

Depuis que React a introduitcrochets, J'ai travaillé avec eux sur plusieurs projets et ils sont tout simplement géniaux.

La suppression de tous les composants basés sur les classes rend le code beaucoup plus «réel» JavaScript. Et les composants fonctionnels peuvent enfin gérer l'état.

Découvrez monPrésentation des crochets Reactd'abord, si vous êtes nouveau pour eux.

Un crochet que j'utilise parfois estuseReducer.

import React, { useReducer } from 'react'

Ce hook est utilisé pour gérer l'état. Un peu commeuseState, sauf plus complexe.

C'est la principale différence entreuseStateetuseReducer: avecuseReducer,l'état est modifié en passant des messagesplutôt que d'appeler la fonction de mise à jour.

Si tu sais commentReduxfonctionne, c'est fondamentalement la même chose. Un réducteur est une fonction pure qui calcule l'état suivant en fonction de l'état précédent et de l'action qui a été distribuée.

(currentState, action) => newState

Que signifie «fonction pure»? Une fonction pure prend une entrée et renvoie une sortie sans changer l'entrée ou quoi que ce soit d'autre. Cela signifie qu'un réducteur renvoie un état complètement nouveau qui remplace le précédent.

Un réducteur doit:

  • ne mute jamais ses arguments
  • ne jamais générer d'effets secondaires (aucun appel d'API ne change quoi que ce soit)
  • ne jamais appeler des fonctions non pures, des fonctions qui modifient leur sortie en fonction de facteurs autres que leur entrée (par exempleDate.now()ouMath.random())

Il n'y a pas de renforcement, mais vous devez vous en tenir aux règles. Et cela présente un avantage appréciable: les réducteurs sont beaucoup plus simples à tester, car ils n'ont aucun effet secondaire.

Cela permet de centraliser la gestion de l'état, permettant aux composants de le modifier en envoyant des messages, et permet également d'utiliser (et de modifier) un état plus complexe dans vos composants.

Faisons un exemple, avec un composant compteur.

useReduceraccepte comme arguments une fonction réductrice et une valeur d'état initiale. Dans ce cas, notre état est un entier, qui commence à 0:

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, 0)
}

Le réducteur est une fonction qui prend, comme expliqué ci-dessus, l'état actuel et une action, qui peut être une valeur de n'importe quel type souhaité. Dans ce cas, c'est une chaîne:

const reducer = (state, action) => {
  switch (action) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      throw new Error()
  }
}

Nous rendons également la sortie du composantJSXpour faire fonctionner cette application simple:

const Counter = () => {
  const [count, dispatch] = useReducer(reducer, 0)
  return (
    <>
      Counter: {count}
      <button onClick={() => dispatch('INCREMENT')}>+</button>
      <button onClick={() => dispatch('DECREMENT')}>-</button>
    </>
  )
}

Voici l'exemple complet sur Codepen:

Voir le styloRéagir l'utilisation Crochet réducteurpar Flavio Copes (@flaviocopes) surCodePen.

Tech Wiki Online!