Dans cet article, nous explorerons comment Zustand permet le remplacement d'état avec la fonction setState, en nous concentrant sur une fonctionnalité intéressante : remplacer l'état sans fusionner. Nous expliquerons comment l'utiliser avec un simple cas de test.

Comprendre la fusion d'états et le remplacement d'états

Avant d'examiner le code, il est important de comprendre la différence entre l'état fusion et remplacement.

• Fusion de l'état : Par défaut, lorsque vous mettez à jour l'état dans Zustand (ou React), il fusionne le nouvel état avec l'état existant. Seuls les champs mis à jour sont modifiés, tandis que le reste de l'état reste intact.

• Remplacement de l'état : En revanche, le remplacement de l'état remplace l'état entier par un nouvel objet, en supprimant tous les champs qui étaient présents dans l'état précédent mais n'en font pas partie du nouvel état.

Quand remplacer l'état

Il existe des situations où le remplacement de l'ensemble de l'état est nécessaire, par exemple :

• Réinitialisation de l'état après la soumission d'un formulaire.

• Remplacement complet de l'état lors du chargement d'un ensemble de données différent.

Scénario de test pour remplacer l'état de Zustand

Voici un cas de test simple de la base de code de Zustand qui montre comment remplacer l'état à l'aide de la fonction setState :

it('can set the store without merging', () => {
  const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

  // Should override the state instead of merging.
  setState({ b: 2 }, true)
  expect(getState()).toEqual({ b: 2 })
})

Décomposer le test

1. Création du magasin Tout d'abord, un magasin Zustand est créé avec un état initial :

const { setState, getState } = create(
    (_set) => ({
      a: 1,
    }),
  )

L'état initial est un objet avec une seule propriété définie sur 1. La fonction create renvoie deux méthodes essentielles :

• setState : Cette méthode est utilisée pour mettre à jour l'état du magasin.

• getState : Cette méthode récupère l'état actuel du magasin.

2. Remplacement de l'état L'opération clé ici consiste à remplacer l'état actuel, { a: 1 }, par un état complètement nouveau :

setState({ b: 2 }, true)

• En passant le vrai indicateur comme deuxième argument, Zustand sait qu'il doit remplacer l'état, plutôt que de fusionner le nouvel objet { b: 2 } avec celui existant. Cela remplace complètement l'état précédent, donc { a: 1 } est supprimé et le nouvel état devient { b: 2 }.

3. Validation du remplacement de l'État Enfin, le test garantit que l'État a été entièrement remplacé :

expect(getState()).toEqual({ b: 2 })

On s'attend à ce qu'après avoir appelé setState({ b: 2 }, true), l'état du magasin ne contienne que { b: 2 } et ne contienne plus { a: 1 }.

Comment Zustand remplace l'état

L'image ci-dessous provient du code source de Zustand qui définit l'état.

Comme vous pouvez le voir, si l'indicateur de remplacement existe, nextState devient le nouvel état.

(replace ?? (typeof nextState !== 'object' || nextState === null))

C'est une manière intelligente, si replace est faux, ce qui est le cas par défaut, (typeof nextState !== 'object' || nextState === null)) la condition est vérifiée.

Conclusion

Zustand offre un moyen simple de gérer l'état dans React, et la possibilité de remplacer complètement l'état à l'aide de setState avec l'indicateur de remplacement offre une flexibilité supplémentaire. Que vous souhaitiez réinitialiser un formulaire, charger de nouvelles données ou effacer d'anciennes valeurs, cette fonctionnalité vous permet de contrôler entièrement la façon dont l'état est géré et mis à jour dans votre application.

À propos de nous:

Chez Think Throo, nous avons pour mission d'enseigner les concepts architecturaux avancés de base de code utilisés dans les projets open source.

10x vos compétences en codage en pratiquant des concepts architecturaux avancés dans Next.js/React, apprenez les meilleures pratiques et créez des projets de niveau production.

Nous sommes open source — https://github.com/thinkthroo/thinkthroo (Donnez-nous une étoile !)

Développez les compétences de votre équipe avec nos cours avancés basés sur l'architecture de base de code. Contactez-nous à [email protected] pour en savoir plus !

Références :

1. https://github.com/pmndrs/zustand/blob/v4.5.5/tests/basic.test.tsx#L471C13-L471C50

2. https://github.com/pmndrs/zustand/tree/v4.5.5?tab=readme-ov-file#overwriting-state