lobehub/zustand

Que fait zustand ?

Conventions pour les stores Zustand de LobeHub. Utilisez-le lors de l'édition de src/store, des slices de store, des actions publiques/internes, des actions dispatch, des flattenActions, des mises à jour optimistes, des sélecteurs, des maps ou de la migration des actions de classe.

Aperçu

Ce skill définit les conventions et bonnes pratiques pour l'utilisation de Zustand au sein de LobeHub. Il couvre la structure des stores, la définition des actions, l'utilisation des sélecteurs et des maps, ainsi que les patrons avancés comme les mises à jour optimistes et la migration depuis des stores basés sur des classes.

Concepts clés

• Store : Un store Zustand centralisé, généralement situé dans src/store.
• Slice : Une partie logique du store, séparée pour des préoccupations distinctes.
• Actions publiques : Actions exposées via le store pour une utilisation externe.
• Actions internes : Actions privées, non exposées, utilisées en interne dans le slice.
• Dispatch action : Action qui dispatch une autre action (par exemple, via dispatchAction).
• flattenActions : Fonction utilitaire pour aplatir les actions imbriquées en une seule structure.
• Mise à jour optimiste : Patron de mise à jour qui suppose que l'opération réussira, avec un rollback en cas d'échec.
• Selecteur : Fonction qui extrait une partie de l'état du store.
• Map : Objet ou structure de données associatif utilisé dans le store.
• Migration d'actions de classe : Processus de conversion d'actions de classe (par exemple, Redux) en actions Zustand.

Utilisation

1. Éditer src/store : Suivez les conventions de nommage et de structure pour les stores.
2. Créer des slices : Divisez le store en slices logiques pour une meilleure maintenabilité.
3. Définir des actions : Distinguez les actions publiques et internes.
4. Utiliser dispatchAction : Appliquez le patron dispatch pour orchestrer des actions complexes.
5. Appliquer flattenActions : Aplatissez les actions pour simplifier la gestion de l'état.
6. Implémenter des mises à jour optimistes : Gérez les mutations avec rollback automatique.
7. Créer des sélecteurs : Optimisez les re-rendus avec des sélecteurs mémoïsés.
8. Utiliser des maps : Organisez les données associatives avec des maps.
9. Migrer des actions de classe : Remplacez les actions de classe par des fonctions Zustand.

Exemple

// Exemple de slice de store
import { create } from 'zustand';

interface CounterSlice {
  count: number;
  increment: () => void;
  decrement: () => void;
}

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

Références

• Documentation Zustand
• LobeHub GitHub