Fermer

décembre 26, 2025

Une introduction à la condition

Une introduction à la condition


Découvrez la bibliothèque de gestion d’état Zustand et regardez une démo pratique de l’interface utilisateur utilisant le composant Progress KendoReact Switch pour basculer entre un thème global.

La gestion des états dans les applications React a évolué au fil des années. Alors que Redux dominant le paysage depuis longtemps, les développeurs recherchent des alternatives plus simples et plus légères qui ne sacrifient pas la puissance au profit de la commodité.

Selon le récent État de réaction 2024 enquête, Zustand est devenu un favori croissant avec 42 % d’utilisation, contre 28 % en 2023. Dans cet article, nous aborderons ce qui rend Zustand attrayant, comment le configurer et une démonstration pratique de l’interface utilisateur utilisant l’outil Progress. Composant KendoReact Switch pour basculer entre un thème global.

Condition

Condition est une petite bibliothèque de gestion d’état qui fournit une API simple basée sur des hooks pour gérer l’état global dans les applications React. Contrairement à Redux, qui nécessite des actions, des réducteurs et davantage de code passe-partout, Zustand vous permet de créer des magasins avec seulement quelques lignes de code tout en étant suffisamment puissant pour gérer des scénarios d’état complexes.

Pourquoi choisir Zustand plutôt que d’autres solutions ?

Avant de plonger dans le fonctionnement de Zustand, comprenons pourquoi vous pourriez le choisir plutôt que d’autres solutions de gestion d’état. Par rapport à l’outil intégré de React utiliserÉtat et utiliserContext hooks, Zustand offre de meilleures performances puisque les composants ne sont restitués que lorsque l’état spécifique auquel ils souscrivent change.

Par rapport à Redux, Zustand offre une courbe d’apprentissage plus courte, ce qui le rend plus facile à comprendre et à mettre en œuvre.

Cela dit, vous devriez vous en tenir useState et useContext pour des applications simples avec des besoins de partage d’état minimes !

Créer votre première boutique

Pour démarrer avec Zustand, installez-le d’abord dans notre projet React :

npm install zustand

Une fois installé, nous pouvons immédiatement commencer à créer des magasins et à les utiliser dans nos composants.

Le concept central de Zustand est le magasinun hook qui contient votre état et les fonctions pour le mettre à jour. Créons un exemple simple en utilisant une fonctionnalité de basculement de thème avec le composant React Switch du Bibliothèque d’interface utilisateur Progress KendoReact.

Nous allons installer le composant KendoReact Switch à partir du @progress/kendo-react-inputs emballer:

npm install @progress/kendo-react-inputs

Maintenant, nous allons créer une boutique de thèmes simple :

import { create } from 'zustand';

const useThemeStore = create((set) => ({
  isDarkMode: false,
  toggleTheme: () => set((state) => ({ isDarkMode: !state.isDarkMode })),
  setTheme: (isDark) => set({ isDarkMode: isDark }),
}));

Dans cet exemple, nous créons une boutique qui gère un état de thème. Le create la fonction prend une fonction qui reçoit un set fonction, que nous utilisons pour mettre à jour l’état du magasin. Notre magasin contient :

  • isDarkMode: Un état booléen indiquant si le mode sombre est activé
  • toggleTheme: Une fonction qui inverse l’état actuel du thème
  • setTheme: Une fonction qui définit le thème sur une valeur spécifique

Utilisation du Store dans les composants

Nous pouvons maintenant créer un composant qui utilise notre boutique de thèmes avec le KendoReact Switch :

import React from 'react';
import { Switch } from '@progress/kendo-react-inputs';
import { useThemeStore } from './store';

const ThemeToggle = () => {
  const { isDarkMode, toggleTheme } = useThemeStore();

  return (
    <div style={{ 
      padding: '20px', 
      backgroundColor: isDarkMode ? '#333' : '#fff',
      color: isDarkMode ? '#fff' : '#333',
      borderRadius: '8px',
      margin: '20px'
    }}>
      <h3>Theme Settings</h3>
      <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>
        <span>Light Mode</span>
        <Switch 
          checked={isDarkMode}
          onChange={(event) => toggleTheme()}
          onLabel="🌙"
          offLabel="☀️"
        />
        <span>Dark Mode</span>
      </div>
      <p>Current theme: {isDarkMode ? 'Dark' : 'Light'}</p>
    </div>
  );
};

export default ThemeToggle;

Le composant se déstructure isDarkMode et toggleTheme de notre magasin et utilise l’état du thème pour styliser le conteneur de manière conditionnelle. Le composant KendoReact Switch est utilisé pour basculer entre les modes clair et sombre avec les émojis du soleil et de la lune.

Créer un exemple plus complexe

Créons un exemple plus complet qui démontre davantage les capacités de Zustand. Nous allons créer un magasin de préférences utilisateur qui gère plusieurs paramètres :

import { create } from 'zustand';

const usePreferencesStore = create((set, get) => ({
  
  user: {
    name: 'Guest',
    email: '',
  },
  settings: {
    notifications: true,
    autoSave: false,
    darkMode: false,
    language: 'en',
  },
  
  
  updateUser: (userData) => set((state) => ({
    user: { ...state.user, ...userData }
  })),
  
  toggleSetting: (settingKey) => set((state) => ({
    settings: {
      ...state.settings,
      [settingKey]: !state.settings[settingKey]
    }
  })),
  
  updateSettings: (newSettings) => set((state) => ({
    settings: { ...state.settings, ...newSettings }
  })),
  
  resetPreferences: () => set({
    user: { name: 'Guest', email: '' },
    settings: {
      notifications: true,
      autoSave: false,
      darkMode: false,
      language: 'en',
    }
  }),
  
  
  getDisplayName: () => {
    const state = get();
    return state.user.name || 'Anonymous User';
  },
}));

Ce magasin présente une structure plus complexe avec des objets d’état imbriqués pour les données et paramètres utilisateur. Nous définissons plusieurs actions pour gérer différents types de mises à jour et incluons une valeur calculée à l’aide du get fonction.

Nous allons maintenant créer un composant de panneau de paramètres complet à l’aide du composant KendoReact Switch :

import React from 'react';
import { Switch } from '@progress/kendo-react-inputs';
import { usePreferencesStore } from './store';

const SettingsPanel = () => {
  const { 
    settings, 
    user,
    toggleSetting, 
    updateUser,
    resetPreferences,
    getDisplayName 
  } = usePreferencesStore();

  return (
    <div style={{ 
      padding: '20px', 
      maxWidth: '400px',
      backgroundColor: settings.darkMode ? '#2d2d2d' : '#f5f5f5',
      color: settings.darkMode ? '#fff' : '#333',
      borderRadius: '8px',
      fontFamily: 'Arial, sans-serif'
    }}>
      <h2>User Preferences</h2>
      
      {}
      <div style={{ marginBottom: '20px' }}>
        <h3>Welcome, {getDisplayName()}!</h3>
        <input
          type="text"
          placeholder="Enter your name"
          value={user.name}
          onChange={(e) => updateUser({ name: e.target.value })}
          style={{
            padding: '8px',
            borderRadius: '4px',
            border: '1px solid #ccc',
            width: '100%',
            marginBottom: '10px'
          }}
        />
        <input
          type="email"
          placeholder="Enter your email"
          value={user.email}
          onChange={(e) => updateUser({ email: e.target.value })}
          style={{
            padding: '8px',
            borderRadius: '4px',
            border: '1px solid #ccc',
            width: '100%'
          }}
        />
      </div>

      {}
      <div style={{ marginBottom: '20px' }}>
        <h3>Settings</h3>
        
        <div style={{ marginBottom: '15px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <label>Dark Mode</label>
            <Switch
              checked={settings.darkMode}
              onChange={() => toggleSetting('darkMode')}
              onLabel="🌙"
              offLabel="☀️"
            />
          </div>
        </div>

        <div style={{ marginBottom: '15px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <label>Notifications</label>
            <Switch
              checked={settings.notifications}
              onChange={() => toggleSetting('notifications')}
              onLabel="🔔"
              offLabel="🔕"
            />
          </div>
        </div>

        <div style={{ marginBottom: '15px' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
            <label>Auto Save</label>
            <Switch
              checked={settings.autoSave}
              onChange={() => toggleSetting('autoSave')}
              onLabel="💾"
              offLabel="📝"
            />
          </div>
        </div>
      </div>

      <button
        onClick={resetPreferences}
        style={{
          padding: '10px 20px',
          backgroundColor: '#ff4444',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        Reset to Defaults
      </button>
    </div>
  );
};

export default SettingsPanel;

Par souci de concision, les exemples de code de cet article utilisent des styles en ligne plutôt que des feuilles de style ou des composants stylisés séparés.

Le composant déstructure plusieurs éléments d’état et d’actions du magasin et utilise un style conditionnel basé sur le paramètre du mode sombre. Le composant connecte trois composants KendoReact Switch pour basculer entre différentes préférences avec des étiquettes emoji.

Comprendre les mises à jour d’état

L’une des forces de Zustand réside dans la façon dont il gère les mises à jour d’état. Le set La fonction fusionne automatiquement le nouvel état avec l’état existant au niveau supérieur, similaire à celui de React. setState. Cependant, pour les objets imbriqués, nous devrons gérer nous-mêmes la fusion :


set({ isDarkMode: true });


set((state) => ({
  settings: {
    ...state.settings,
    darkMode: true
  }
}));

On peut aussi remplacer l’état entier en passant true comme deuxième paramètre :

set(newState, true);

Organisation du magasin et bonnes pratiques

Voici quelques bonnes pratiques à garder à l’esprit lorsque vous travaillez avec des magasins Zustand dans une grande application.

1. Magasin unique ou magasins multiples

Zustand n’impose aucun modèle particulier, mais il est préférable de :

  • Utilisez un magasin unique pour l’état associé qui pourrait devoir interagir.
  • Divisé en plusieurs magasins pour des fonctionnalités complètement indépendantes.

const useUserStore = create((set) => ({
  profile: null,
  preferences: {},
  updateProfile: (data) => set((state) => ({ profile: { ...state.profile, ...data } })),
  updatePreferences: (prefs) => set({ preferences: prefs }),
}));


const useCartStore = create((set) => ({
  items: [],
  total: 0,
  addItem: (item) => set((state) => ({ 
    items: [...state.items, item],
    total: state.total + item.price 
  })),
}));

2. Découpage en magasin

Pour les applications plus importantes, nous pouvons également diviser notre magasin en tranches:

const createUserSlice = (set, get) => ({
  user: null,
  setUser: (user) => set({ user }),
  clearUser: () => set({ user: null }),
});

const createSettingsSlice = (set, get) => ({
  settings: { theme: 'light', notifications: true },
  updateSettings: (newSettings) => set((state) => ({
    settings: { ...state.settings, ...newSettings }
  })),
});

const useAppStore = create((...a) => ({
  ...createUserSlice(...a),
  ...createSettingsSlice(...a),
}));

3. Actions en dehors du magasin

Nous pouvons également définir des actions en dehors du magasin si nous préférons :

const useCounterStore = create(() => ({
  count: 0,
}));


export const increment = () => 
  useCounterStore.setState((state) => ({ count: state.count + 1 }));

export const decrement = () => 
  useCounterStore.setState((state) => ({ count: state.count - 1 }));

export const reset = () => 
  useCounterStore.setState({ count: 0 });

Conclure

Zustand représente une évolution vers la simplicité dans la gestion des états React sans sacrifier la flexibilité. Son API basée sur des hooks semble naturelle aux développeurs React, tandis que ses caractéristiques de performances et son passe-partout minimal en font un excellent choix pour les petits projets et les grandes applications.

Pour plus d’informations sur Zustand et le composant KendoReact Switch, assurez-vous de consulter la documentation officielle de ces utilitaires :

Le KendoReact Switch fait partie de KendoReact Free : utilisation gratuite, y compris en production, aucune inscription ni licence requise.

Téléchargez KendoReact gratuitement

Le meilleur outil 2023 pour ta croissance Instagram !



Source link