Suivi des changements d'état avec le plugin Zustand

Zustand est une solution de gestion d’état très rapide et minimaliste qui remplace des solutions comme Redux. Avec notre plugin Zustand, vous pouvez suivre les changements d’état tout au long du cycle de vie de votre application.

Installation du plugin

Le plugin peut être facilement installé avec la commande suivante :

npm i @openreplay/tracker-zustand

Utilisation du plugin dans une application Next.js

Pour cet exemple, nous allons utiliser la même application présentée dans le tutoriel Next.js pour notre tracker, donc si vous voulez plus de détails sur le fournisseur de Context utilisé, consultez d’abord celui-ci.

Remarque : le code source complet de cet exemple se trouve dans ce dépôt Github, allez le consulter si vous avez besoin de plus de détails.

Le fournisseur de Context que j’utilise permet la configuration des Plugins du Tracker, donc après avoir installé le plugin, nous allons modifier le fichier _app.tsx en ajoutant l’instruction d’import ci-dessous :

import trackerZustand from '@openreplay/tracker-zustand'

Et ensuite, la fonction principale App devrait ressembler à ceci :

export default function MyApp({ Component, pageProps }: AppProps) {
  const Layout = (Component as any).Layout || Noop

  useEffect(() => {
    document.body.classList?.remove('loading')
  }, [])

  let plugins = [
    {
      fn: trackerZustand,
      name: 'zustand',
    },
  ]

  return (
    <TrackerProvider
      config={{
        plugins
      }}
    >
      <Head />
      <ManagedUIContext>
        <Layout pageProps={pageProps}>
          <Component {...pageProps} />
        </Layout>
      </ManagedUIContext>
    </TrackerProvider>
  )
}

Cela initialisera automatiquement le plugin avec le tracker, et rendra également disponibles les données renvoyées par l’exécution de la fonction principale du plugin.

L’étape suivante consiste à créer un store ; nous y ajouterons des produits du site e-commerce dans un instant.

Création d’un store avec le plugin Zustand

L’utilisation du plugin nécessite de modifier la manière dont vous instanciez habituellement un store Zustand, alors n’hésitez pas à copier-coller le code suivant comme modèle :

import create from 'zustand'

const productStore = null
export const useProductsStore = (logger) => {
  if (!productStore) {
    //use a singleton pattern to make sure we only create the store the first time around
    productStore = createProductStore(logger)
  }
  return productStore
}

function createProductStore(logger) {
  return create(
    logger((set) => ({
      products: [],
      addProduct: (p) =>
        set((state) => {
          const prodFound = state.products.find((prod) => {
            return p.id == prod.id
          })
          if (prodFound) {
            p.amount = prodFound.amount + 1
          } else {
            p.amount = 1
          }

          return {
            products: [...state.products.filter((prod) => p.id != prod.id), p],
          }
        }),
    }))
  )
}

La fonction exportée créera le store lors de sa première utilisation, mais par la suite, elle renverra simplement celui qui existe déjà.

D’autre part, la fonction createProductStore créera le store, définira la logique de la méthode addProduct et utilisera la fonction logger que nous lui fournissons. Ce logger, comme vous l’avez probablement deviné, est celui que nous avons reçu en utilisant le plugin Zustand.

Une fois le store prêt, nous pouvons commencer à y ajouter des produits.

Ajout de produits à notre store

Le store exporte la méthode addProduct, qui se charge de suivre les produits de notre panier.

Pour importer la fonction dans votre code, vous devez :

Importer et utiliser le fournisseur de Context du Tracker.
Récupérer l’attribut pluginsReturnedValue depuis le contexte.
L’utiliser pour appeler la méthode zustand (notez que la méthode porte le nom de l’attribut name lorsque nous avons configuré le plugin ci-dessus), et passer un attribut de type chaîne pour donner un nom au store (ce nom sera utilisé pendant le replay).
La méthode zustand renverra le logger que nous utiliserons lors de l’appel du hook useProductStore de zustand (celui que nous avons créé pour le store).

Tout cela semble être beaucoup, mais cela se traduit essentiellement par ceci :

const { pluginsReturnedValues } = useContext(TrackerContext)

const useProductStoreTracked = useProductsStore(
  pluginsReturnedValues.zustand('products_store')
)
const { addProduct } = useProductStoreTracked()

Maintenant, vous pouvez simplement appeler la méthode addProduct, et elle ajoutera les produits du panier au store.

Lecture des données du store

Comme vous pouvez probablement le deviner, si vous voulez lire des données du store Zustand, vous devez suivre le même ensemble d’étapes. Mais au lieu de prendre la méthode addProduct, nous allons déstructurer le tableau products.

Comme ceci :

const { pluginsReturnedValues } = useContext(TrackerContext)

const useProductStoreTracked = useProductsStore(
  pluginsReturnedValues.zustand('products_store')
)
const { products } = useProductStoreTracked()

Vous pouvez ensuite parcourir les products normalement :

<div>
  {products.map((p: Product, idx: Number) => {
    return (
      <div key={+idx}>
        {p.name}({p.amount})
      </div>
    )
  })}
</div>

Le code ci-dessus parcourt la liste des produits et les affiche à l’écran. Chaque fois que vous ajoutez un autre produit au store, il sera également mis à jour ici.

Synchroniser l’état avec la relecture de session

Pour examiner les changements d’état pendant le replay, cliquez simplement sur le nouvel onglet Zustand dans le coin inférieur droit :

Nouvel onglet pour les données suivies par Zustand

En cliquant dessus, vous verrez le contenu du store, et vous pourrez comprendre comment il change ainsi que les données qui y sont enregistrées :

Données d'état affichées pendant le replay

Remarquez le nom du store : il s’agit en fait du nom que nous avons utilisé lors du premier appel de la méthode zustand.

Des questions ?

Si vous n’utilisez pas Next.js mais un autre framework, la manière de l’utiliser devrait être similaire ; l’élément clé est la façon dont vous créez le store. Tant que vous trouvez un moyen d’utiliser la fonction logger lors de sa création, vous pourrez suivre l’état pendant le replay.

Vous pouvez consulter ce dépôt pour obtenir le code source complet d’une application Next.js fonctionnelle avec le plugin Zustand.

Si vous rencontrez des problèmes pour configurer le plugin Zustand dans votre projet, contactez-nous sur notre communauté Slack et posez directement vos questions à nos développeurs !