Skip to main content

@lithium-framework/state

Gestion des États avec Lithium

@lithium-framework/state fournit une gestion des états puissante et intuitive, permettant de suivre et de réagir aux changements de valeurs de manière efficace. Ce guide explique comment utiliser la classe State et la fonction createState pour gérer les états dans vos applications.

Introduction​

Lithium propose une gestion d'état élégante basée sur des objets observables. Les états permettent de suivre et de réagir aux changements de manière réactive, simplifiant ainsi la gestion des données dans vos applications.

Installation​

Installez Lithium state via npm :

npm install @lithium-framework/state

Utilisation​

Initialisation d'un État​

Pour initialiser un état, utilisez la classe State ou la fonction createState :

import { State, createState } from '@lithium-framework/state';

// Utilisation de la classe State
let state = State.init<number>(0);

// Utilisation de la fonction createState
let [counter, setCounter] = createState<number>(0);

Souscription aux Changements d'État​

Vous pouvez souscrire aux changements d'état pour réagir aux modifications de valeur :

// Souscrire aux changements d'état avec la classe State
state.subscribe((newValue) => {
  console.log('Nouvelle valeur:', newValue);
});

// Souscrire aux changements d'état avec createState
counter.subscribe((newValue) => {
  console.log({ newValue });
});

// Mettre à jour l'état
setCounter(counter.value + 1);

Historique des États​

Lithium maintient un historique des valeurs d'état, permettant de suivre les changements successifs :

state.value = 1;
state.value = 2;

// Affiche les valeurs précédentes, jusqu'à 10 entrées
console.log(state.history);

Mutateurs​

Les mutateurs permettent de gérer l'état et de le mettre à jour de manière fluide :

let [ counter, setCounter ] = state.mutator;

setCounter(10); // Met à jour l'état à 10
console.log(counter.value); // Affiche 10

Symbol.toPrimitive​

Lithium permet de convertir des objets d'état en valeurs primitives de manière personnalisée :

// Utilise Symbol.toPrimitive pour obtenir la valeur primitive
let primitiveValue = +state; 

console.log(primitiveValue);

API de Référence​

State<T>​

  • Propriétés :
    • value: T - Obtient ou définit la valeur actuelle de l'état.
    • history: T[] - Obtient l'historique des valeurs de l'état (jusqu'à 10 entrées).
  • Méthodes :
    • static init<T>(value: T): State<T> - Initialise un nouvel état avec la valeur spécifiée.
    • subscribe(callback: (newValue: any) => void): void - Souscrit aux changements de valeur de l'état.
    • mutator: [State<T> & T, (newValue: T) => void] - Renvoie un tableau contenant l'état et une fonction pour le mettre à jour.

createState<T>(value: T): [State<T> & T, (newValue: T) => void]​

Crée un état avec une valeur initiale et renvoie son mutateur.

Exemples Complets​

Exemple 1 : Compteur Réactif​

import { createState } from '@lithium-framework/state';

let [ counter, setCounter ] = createState<number>(0);

counter.subscribe(( newValue ) => {
  console.log('Valeur du compteur:', newValue);
});

setCounter(counter.value + 1); // Incrémente le compteur

Exemple 2 : Historique des États​

import { createState } from '@lithium-framework/state';

let [ state , setState ] = createState<number>(0);

setState( 1 );
setState( 2 );
setState( 3 );

console.log(state.history); // Affiche [0, 1, 2]