Combats en Ligne
Améliorez vos compétences et stratégies pour dominer les combats en ligne Pokémon. Guide et astuces pour la compétition !
Dans ce chapitre, nous allons aborder l'intégration de la librairie Zustand dans notre application Next.js 13 avec l'architecture app directory. Zustand est une librairie de gestion d'état simple et efficace, idéale pour les applications React.
Pour une introduction plus détaillée de Zustand, vous pouvez consulter le chapitre dédié dans la partie Gestion d'état.
Prérequis
Avant de commencer, assurez-vous d'avoir un projet Next.js 13 opérationnel. Si ce n'est pas le cas, vous pouvez créer un nouveau projet en utilisant la commande suivante :
npx create-next-app@latest my-zustand-app
Installation de Zustand
Pour installer Zustand, utilisez la commande suivante dans votre projet :
npm install zustand
Création d'un Store Zustand
Créez un fichier store.js (ou store.ts si vous
utilisez TypeScript) dans votre dossier app (ou un sous-dossier
store pour une meilleure organisation). Voici un exemple de store
simple :
// app/store/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;
Dans cet exemple, nous avons un store avec un état count et deux
actions pour incrémenter et décrémenter cette valeur.
Utilisation du Store dans un Composant
Vous pouvez maintenant utiliser ce store dans n'importe quel composant de votre application. Voici un exemple d'utilisation dans une page Next.js :
// app/page.js
'use client';
import useStore from './store/store';
export default function HomePage() {
const count = useStore((state) => state.count);
const increment = useStore((state) => state.increment);
const decrement = useStore((state) => state.decrement);
return (
Zustand Example
Count: {count}
Increment
Decrement
);
}
Notez l'utilisation de 'use client'; pour indiquer que ce
composant est un composant client, nécessaire pour utiliser Zustand dans
l'architecture app directory de Next.js 13.
Avantages de Zustand
-
Simplicité : Zustand est facile à apprendre et à utiliser, avec une API minimaliste.
-
Performance : Zustand est optimisé pour les performances, en évitant les re-renders inutiles.
-
Flexibilité : Zustand peut être utilisé avec ou sans React, ce qui le rend idéal pour une variété de projets.
Conclusion
Dans ce chapitre, nous avons vu comment intégrer Zustand dans un projet Next.js 13 avec l'architecture app directory. Zustand est une excellente option pour la gestion d'état, offrant simplicité, performance et flexibilité.
Pour des exemples plus avancés et des cas d'utilisation spécifiques, consultez la documentation officielle de Zustand.

