Gestion de l’état du harnais à l’aide de Zustand | de Abhishek KM | janvier 2023

La solution de gestion d’état pour React

La gestion de l’état est le processus de maintenance et de partage de l’état des données de l’application sur plusieurs flux de données et composants associés sans forage prop vers les composants enfants.

Pour citer les documents officiels :

« Une petite solution de gestion d’état Bearbones rapide et évolutive utilisant des principes de flux simplifiés. A une API confortable basée sur des crochets et n’est pas passe-partout ou opiniâtre.

Et d’après mon expérience personnelle, je peux m’en tenir à cela et irais un peu plus loin pour le soutenir en tant que bibliothèque de gestion d’état la plus simple que j’ai utilisée pour réagir ou même du JavaScript vanille.

Pourquoi Zustand ?

1. Simple et sans opinion par rapport à ses concurrents
2. Utilise les crochets comme principal moyen de consommer l’état
3. Pas besoin de fournisseur de contexte ou de composants wrapper/d’ordre supérieur
4. Peu ou pas de passe-partout par rapport à ses concurrents

Commençons, d’accord ?

Étape 1:

Installez zustand dans votre application React en exécutant :

npm i zustand ou alors yarn add zustand

Étape 2:

Créez un dossier nommé store. Votre logique de gestion d’état doit aller dans ce dossier. je nommerai le mien store/storeOne.js commencer.

Étape 3:

Créer une boutique en important create de l’état :

import create from "zustand";

puis utiliser create pour créer votre première boutique :

const useStoreOne = create();

Étape 4:

Pour ajouter des valeurs et des actions au magasin, create prend en charge une fonction de rappel qui vous permet de définir et d’obtenir des valeurs. La fonction de rappel prend deux arguments set et get. set est utilisé pour définir des valeurs et get comme le nom le suggère. Il est utilisé pour obtenir des valeurs dans le magasin.

Nous allons juste utiliser set pour l’instant, nous allons revenir à get plus tard.

La fonction de rappel doit renvoyer un objet avec les valeurs et les fonctions du magasin. Donc, pour ajouter une valeur, nous ferions quelque chose comme ceci :

const useStoreOne = create((set) => ({
value: 0,
}));

Et l’ajout d’une action est également similaire, attribuez une fonction anonyme pour créer une action, puis utilisez set pour définir la valeur mise à jour. set prend une fonction de rappel à laquelle l’état actuel du magasin est passé, similaire à la façon dont useState travaux.

const useStoreOne = create((set) => ({
value: 0,
increaseValue: () => set((state) => ({ value: state.value + 1 })),
decreaseValue: () => set((state) => ({ value: state.value - 1 })),
}));

Étape 5 :

Vous n’êtes qu’à une exportation de l’accès à votre boutique. Ajoutons la déclaration d’exportation.

export default useStoreOne;

Et maintenant, vous avez fini de créer votre boutique ! A la fin de l’implémentation, votre boutique devrait ressembler à ceci :

import create from "zustand";
const useStoreOne = create((set) => ({
value: 0,
increaseValue: () => set((state) => ({ value: state.value + 1 })),
decreaseValue: () => set((state) => ({ value: state.value - 1 })),
}));
export default useStoreOne;

Comme je l’ai mentionné précédemment, vous n’avez pas besoin d’un fournisseur de contexte pour consommer ou accéder au magasin. Vous devez importer le magasin où vous souhaitez utiliser la valeur ou l’action du magasin. Et c’est aussi très simple d’accéder à la valeur et à l’action du magasin. Voici une application simple pour augmenter et diminuer la valeur.

import useStoreOne from "./store/storeOne";
function App() {
const { value, increaseValue, decreaseValue } = useStoreOne();
return (
<>
<button onClick={increaseValue}>+</button>
<h1>{value}</h1>
<button onClick={decreaseValue}>-</button>
</>
);
}
export default App;

Comme vous pouvez le constater, nous déstructurons toutes nos valeurs et actions du magasin. Il existe plusieurs façons de faire la même chose. En voici quelques uns:

 // 1
const { value, increaseValue, decreaseValue } = useStoreOne();
// 2
const { value, increaseValue, decreaseValue } = useStoreOne((state) => ({
value: state.value,
increaseValue: state.increaseValue,
decreaseValue: state.decreaseValue,
}));
// 3
const value = useStoreOne((state) => state.value);
const increaseValue = useStoreOne((state) => state.increaseValue);
const decreaseValue = useStoreOne((state) => state.decreaseValue);
// 4
const [value, increaseValue, decreaseValue] = useStoreOne((state) => [
state.value,
state.increaseValue,
state.decreaseValue,
]);

Bien que j’utilise la première méthode dans l’application ci-dessus, vous devez éviter de l’utiliser. La raison? Voici une citation d’un Blog Je suis tombé sur lors de mes recherches :

// ❌ we could do this if useBearStore was exported
const { bears } = useBearStore()

Bien que le résultat puisse être le même, vous obtiendrez le nombre d’ours. Le code ci-dessus vous abonnera à l’ensemble du magasin, ce qui signifie que votre composant sera informé de toute mise à jour d’état, et donc restitué, même si les ours n’ont pas changé, par exemple parce que quelqu’un a mangé un poisson.

Bien que les sélecteurs soient facultatifs dans Zustand, je pense qu’ils doivent toujours être utilisés. Même si nous avons un magasin avec une seule valeur d’état, j’écrirais un crochet personnalisé uniquement pour pouvoir ajouter plus d’état à l’avenir.

En bref, vous finissez par vous abonner à toutes les valeurs et actions du magasin, ce qui peut provoquer de nombreux rendus inattendus et indésirables.

Comme promis plus tôt, nous allons maintenant discuter de get . get devrait être idéalement utilisé pour accéder à une valeur ou à une action pour faire quelque chose avec la valeur ou l’action et non pour mettre à jour des états. Par exemple, vous pouvez effectuer les opérations suivantes :

const useStoreOne = create((set, get) => ({
value: 0,
increaseValue: () => set({ value: get().value + 1 }),
}));

Mais get().value peut ne pas vous fournir l’état le plus récent de value. Alors que quelque chose comme :

const useStoreOne = create((set, get) => ({
value: 0,
increaseValue: () => set((state) => ({ value: state.value + 1 })),
decreaseValue: () => set((state) => ({ value: state.value - 1 })),
storeActions: () => [get().increaseValue, get().decreaseValue],
}));

serait idéal car vous ne changez pas les états directement avec get.

Dans les projets plus importants, vous rencontrerez des cas d’utilisation dans lesquels vous devrez mettre à jour les états d’un autre magasin via un autre magasin ou même accéder à certaines actions à partir d’un autre magasin. Pour de telles instances, vous ne pourrez pas y accéder par la manière plus réactive dont nous avons déjà discuté, mais vous devez utiliser davantage une méthode JavaScript vanille pour y accéder. Par example:

import create from "zustand";
import { storeOne } from "./storeOne";
const useStoreTwo = create(() => ({
setStoreOneValue: (newValue) => storeOne.setState({ value: newValue }),
getStoreOneActions: () => storeOne.getState().storeActions(),
}));
export default useStoreTwo;

Dans l’extrait ci-dessus, nous utilisons setState mettre à jour l’état de storeOne et getState pour obtenir l’état/l’action de storeOne.

Cet article vise à aider quiconque cherche à passer à Zustand ou à montrer qu’il existe des moyens plus simples d’obtenir une gestion d’état sans utiliser Redux ou toute autre solution de gestion d’état conventionnelle.

Si vous souhaitez approfondir Zustand, vous pouvez consulter les éléments suivants :