FrontMaster - Apprendre le Front-end Avance

Architecture du Store Global

Creation structuree d'un store avec Zustand ou Redux Toolkit.

La gestion d'etat est cruciale pour les applications complexes. Il existe deux approches principales :

Etat local : useState/useReducer (React), ref/reactive (Vue). Pour les donnees propres a un composant.

Etat global : Zustand, Redux Toolkit, Pinia. Pour les donnees partagees entre composants.

Zustand est aujourd'hui recommande pour sa simplicite. Il offre un store minimaliste sans boilerplate excessif.

React Query / SWR gerent l'etat serveur (cache, revalidation, mutations) et ne doivent pas etre confondus avec les stores globaux.

Exemple de code

store-zustand.ts

typescript

import { create } from "zustand";

// Types
interface CartItem {
  id: string;
  name: string;
  price: number;
  quantity: number;
}

interface CartStore {
  items: CartItem[];
  addItem: (item: Omit<CartItem, "quantity">) => void;
  removeItem: (id: string) => void;
  updateQuantity: (id: string, qty: number) => void;
  total: () => number;
  clear: () => void;
}

// Store Zustand
export const useCartStore = create<CartStore>((set, get) => ({
  items: [],

  addItem: (item) => set((state) => {
    const existing = state.items.find(i => i.id === item.id);
    if (existing) {
      return {
        items: state.items.map(i =>
          i.id === item.id
            ? { ...i, quantity: i.quantity + 1 }
            : i
        )
      };
    }
    return { items: [...state.items, { ...item, quantity: 1 }] };
  }),

  removeItem: (id) => set((state) => ({
    items: state.items.filter(i => i.id !== id)
  })),

  updateQuantity: (id, qty) => set((state) => ({
    items: state.items.map(i =>
      i.id === id ? { ...i, quantity: qty } : i
    )
  })),

  total: () => get().items.reduce(
    (sum, item) => sum + item.price * item.quantity, 0
  ),

  clear: () => set({ items: [] }),
}));

A retenir

1Etat local pour les donnees propres au composant
2Etat global pour les donnees partagees (auth, panier)
3Zustand : simple, leger, sans boilerplate
4React Query/SWR pour le cache et la synchronisation serveur

Exercice pratique

Creer un store Zustand

Creez un store Zustand pour gerer une liste de taches (Todo) avec les fonctionnalites suivantes :

1Interface Todo avec : id (string), text (string), done (boolean)

2Le store doit avoir :

todos: Todo[] - la liste

addTodo(text: string) - ajouter une tache

toggleTodo(id: string) - basculer done/pas done