Zustand avec Next.js : guide complet

Pourquoi Zustand avec Next.js : guide complet ?

Au quotidien, les développeurs de front-end sont souvent confrontés à la gestion des états complexes dans leurs applications React. Les bibliothèques comme Redux ou MobX offrent des solutions robustes mais peuvent être assez verbeuses et complexes à mettre en place. C'est là que Zustand entre en jeu.

Zustand est une solution plus simple et réactive pour gérer l'état de votre application React. Il est conçu pour être facile à utiliser, performant et évolutif. Un cas d'usage concret pourrait être la gestion des informations utilisateur dans une application e-commerce : chaque fois que l'utilisateur change d'article ou ajoute un produit au panier, Zustand permettra de mettre à jour automatiquement toutes les composantes qui affichent ces informations.

Prerequis

Avant de commencer ce tutoriel, vous devrez avoir les éléments suivants :

• Connaissance intermédiaire du React
• Une version récente d'Node.js et npm installée (v14.0.0 ou plus)
• Visual Studio Code avec l'extension ESLint recommandée

Concepts fondamentaux

1. Installation de Zustand

Pour installer Zustand, vous utiliserez npm :

npm install zustand

2. Création d'un état global

Un état global est un objet qui contient toutes les données que vos composants peuvent lire ou modifier.

// store.js
import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 })),
  decrement: () => set(state => ({ count: state.count - 1 }))
}));

export default useStore;

3. Utilisation de l'état global dans un composant

Maintenant, vous pouvez utiliser cet état dans vos composants React.

// Counter.js
import useStore from '../store';

const Counter = () => {
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);
  const decrement = useStore(state => state.decrement);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default Counter;

Mise en pratique : projet fil rouge

Dans ce tutoriel, nous allons créer une application simple de compteur à rebours. Vous aurez besoin d'un fichier index.js pour le rendu et un autre fichier store.js pour la gestion de l'état.

Étape 1: Création du store Zustand

// store.js
import create from 'zustand';

const useCountdownStore = create((set) => ({
  timeLeft: 60,
  startTimer: () => set(state => ({ timerId: setInterval(() => {
    if (state.timeLeft > 0) {
      set(state => ({ timeLeft: state.timeLeft - 1 }));
    } else {
      clearInterval(state.timerId);
    }
  }, 1000)}))),
  stopTimer: () => set(state => ({ timerId: null, timeLeft: 60 }))
}));

export default useCountdownStore;

Étape 2: Création du composant de compteur

// Countdown.js
import useCountdownStore from '../store';

const Countdown = () => {
  const timeLeft = useCountdownStore(state => state.timeLeft);
  const startTimer = useCountdownStore(state => state.startTimer);
  const stopTimer = useCountdownStore(state => state.stopTimer);

  return (
    <div>
      <h1>Time left: {timeLeft}s</h1>
      <button onClick={startTimer}>Start Timer</button>
      <button onClick={stopTimer}>Stop Timer</button>
    </div>
  );
};

export default Countdown;

Étape 3: Rendu de l'application

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from './Countdown';

const App = () => (
  <React.StrictMode>
    <h1>Countdown Timer</h1>
    <Countdown />
  </React.StrictMode>
);

ReactDOM.render(<App />, document.getElementById('root'));

Erreurs frequentes et debugging

1. Erreur : "Uncaught ReferenceError: set is not defined"

## ❌ Mauvais
const store = create((set) => ({
  count: 0,
  increment() { // Erreur ici
    set({ count: state.count + 1 });
  }
}));

## ✅ Correct
const store = create((set) => ({
  count: 0,
  increment: () => set(state => ({ count: state.count + 1 }))
}));

2. Erreur : "Cannot read property 'timeLeft' of undefined"

## ❌ Mauvais
const timeLeft = useCountdownStore().timeLeft; // Erreur ici

## ✅ Correct
const timeLeft = useCountdownStore(state => state.timeLeft);

3. Erreur : "Invalid hook call"

Les hooks ne peuvent être appelés que à la racine d'un composant ou dans un autre hook personnalisé.

// ❌ Mauvais
if (condition) {
  const count = useStore(state => state.count);
}

## ✅ Correct
const count = useStore(state => state.count);

Pour aller plus loin

1. Persistez l'état : Utilisez des bibliothèques comme zustand-middleware-persist pour sauvegarder l'état de votre application entre les sessions.
2. Middleware : Créez vos propres middleware pour ajouter des fonctionnalités comme le logging ou la validation.
3. Reactivity : Apprenez comment Zustand exploite la réactivité de React pour efficacement mettre à jour les composants.

Défi pratique : Ajoutez une fonctionnalité pour reset l'heure du compteur et affichez-le dans le UI.

Ce tutoriel vous a montré comment utiliser Zustand avec Next.js pour gérer facilement les états globaux de votre application. En suivant ces étapes, vous devriez être capable de créer des applications React plus robustes et performantes.