EnglishBac à sable

Les effets

Un effet exécute un effet de bord — manipulation du DOM, journalisation, appels réseau — et se ré-exécute dès que ses lectures réactives changent :

import { signal, effect } from '@fluixi/reactive/signal';

const theme = signal('dark');

effect(() => {
  document.body.dataset.theme = theme(); // se ré-exécute quand theme change
});

$effect fait la même chose sans l'import, et createEffect est la même fonction sous son nom d'origine — tout ce qui suit vaut pour les deux.

L'effet s'exécute une fois immédiatement pour établir ses dépendances, puis à chaque changement.

Nettoyage

Enregistrez un nettoyage avec onCleanup. Il s'exécute avant la ré-exécution de l'effet et lors de sa destruction — idéal pour les minuteurs, écouteurs et abonnements :

import { onCleanup } from '@fluixi/reactive/signal';

effect(() => {
  const id = setInterval(tick, delay());
  onCleanup(() => clearInterval(id)); // nettoyé avant la prochaine exécution / à la destruction
});

Valeur précédente

La fonction d'effet reçoit sa valeur de retour précédente, pour comparer d'une exécution à l'autre :

effect((prev) => {
  const value = count();
  if (prev !== value) report(prev, value);
  return value;
});

Regroupement (batch)

Plusieurs écritures dans batch ne notifient les dépendants qu'une fois, après le lot :

import { batch } from '@fluixi/reactive/signal';

batch(() => {
  first.set('Grace');
  last.set('Hopper');
}); // les effets dépendant des deux s'exécutent une seule fois

Suivant : Les stores.