Suivre les changements d'état avec le plugin Zustand

Zustand est un remplacement très rapide et minimaliste pour les solutions de gestion d’état 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 installé facilement avec la commande suivante :

npm i @openreplay/tracker-zustand

Utilisation du plugin dans une application Next.js

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

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

import trackerZustand from '@openreplay/tracker-zustand'

Et ensuite, la fonction App principale 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 ajouterons dans un instant des produits du site e-commerce dans ce store.

Création d’un store avec le plugin Zustand

L’utilisation du plugin nécessite de changer 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 la première fois qu’elle est utilisée, 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 dans notre panier.

Pour importer la fonction dans votre code, vous devez :

Importer et utiliser le fournisseur de contexte du Tracker.
Récupérer l’attribut pluginsReturnedValue depuis le contexte.
L’utiliser pour appeler la méthode zustand (remarquez que la méthode porte le nom de l’attribut name lorsque nous configurons le plugin ci-dessus), et passer un attribut de type string 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 en substance, tout se traduit par :

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 la même série 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 itérer normalement sur les produits :

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

Le code ci-dessus itère sur 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 session replay

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

New tab for the Zustand tracked data

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 :

State data shown during the replay

Remarquez le nom du store : c’est en réalité le nom que nous avons utilisé lors du premier appel de la méthode zustand.

Vous avez des questions ?

Si vous n’utilisez pas Next.js mais un autre framework, la manière de l’utiliser devrait être similaire ; la clé réside dans 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 lors de la configuration du plugin Zustand sur votre projet, n’hésitez pas à nous contacter sur notre communauté Slack et à poser vos questions directement à nos développeurs !