Logique d'état réutilisable, extensible et testable avec programmation réactive.

État dans les composants de l'interface utilisateur

Lorsque nous commençons à introduire un état dans un composant d'interface utilisateur, il est souvent tentant de faire quelque chose comme ceci :

Exemple de compteur simple en Svelte :

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  clicks: {count}
</button>

Problème

Nous utilisons Svelte ici, mais le problème peut s'appliquer dans n'importe quel cadre d'interface utilisateur.

Dès le départ, nous avons étroitement couplé notre logique d'état au composant - la fonctionnalité d'incrémentation est codée directement dans le modèle.

Avec cette configuration nous ne pouvons pas réutiliser la logique du compteur dans :

• autres composants de l'interface utilisateur
• autre logique métier qui nécessite un compteur
• autres frameworks d'interface utilisateur

Nous ne pouvons pas non plus tester la logique du compteur sans restituer le composant. Si le composant est associé à d'autres fonctionnalités, il ne serait pas possible d'isoler la logique du compteur.

Solution:

Séparez la logique d'état du composant de l'interface utilisateur afin qu'elle puisse être implémentée et testée indépendamment. Cela rendra la logique plus réutilisable et les composants de l'interface utilisateur n'auront qu'à écouter les changements d'état et à effectuer le rendu. Considérez ce qui suit :

<script>
  import { RxCounter } from './RxCounter';

  const [count, { increment }] = RxCounter();
</script>

<button onclick={increment}>
  Count: {$count}
</button>

Voir l'exemple complet sur StackBlitz

Si vous comparez ci-dessus avec notre exemple original, toute la logique du compteur est désormais encapsulée dans RxCounter (nous montrerons l'implémentation plus tard).

count est un observable RxJS qui émet le nouvel état de comptage. L'incrémentation est une méthode d'action que l'interface utilisateur peut appeler pour invoquer des changements d'état.

Svelte a une manière intégrée de s'abonner aux observables dans le modèle, comme le montre la variable de modèle $count. S'abonner à un observable dans n'importe quel framework d'interface utilisateur n'est pas très difficile, et de nombreux frameworks disposent d'API pour aider à y parvenir.

Implémentation de RxCounter

Informations et clause de non-responsabilité : nous utiliserons l'API Reactables créée par l'auteur. Il s'agit d'une solution de gestion d'état qui exploite RxJS pour faciliter la programmation réactive.

Obtenez le package de base Reactables et créez RxCounter.

npm dans @reactables/core

import { RxBuilder } from '@reactables/core';

export const RxCounter = () =>
  RxBuilder({
    initialState: 0,
    reducers: {
      increment: (count) => count + 1,
    },
  });

RxBuilder renvoie un Reactable.

Un Reactable est un tuple dont le premier élément est un observable RxJS émettant des changements d'état et le deuxième élément est un dictionnaire de méthodes d'action pour déclencher des mises à jour d'état.

L'État est réactif, ce qui signifie que l'État répond aux changements via ses fonctions réductrices. Lorsqu'une action d'incrémentation déclenchée par l'interface utilisateur est reçue, le réactif réagit et son observable émet le nouvel état.

Notez que RxCounter est désormais complètement découplé de la couche de vue et peut être utilisé dans n'importe quel framework d'interface utilisateur !

Tester le compteur

Pour tester un Reactable, nous souscrivons à son état observable et invoquons ses méthodes d'action pour tester son comportement. Nous pouvons affirmer que les valeurs émises par l'observable correspondent au comportement souhaité.

Cela peut être fait avec les tests de marbre intégrés de RxJS.

<script>
  let count = $state(0);
</script>

<button onclick={() => count++}>
  clicks: {count}
</button>

Extension du compteur

Avec la logique d'état isolée de la vue, nous pouvons également étendre les fonctionnalités de RxCounter et créer un RxDoubleCounter qui a la capacité de doubler le décompte.

<script>
  import { RxCounter } from './RxCounter';

  const [count, { increment }] = RxCounter();
</script>

<button onclick={increment}>
  Count: {$count}
</button>

Voir l'exemple complet sur StackBlitz

Conclusion

L'implémentation de la logique d'état directement dans les composants de l'interface utilisateur rend la logique plus difficile à réutiliser et à tester.

Nous pouvons programmer la logique d'état de manière réactive avec Reactables et la tester de manière isolée. Cela produit une unité de logique d'état réactif qui est hautement réutilisable à la fois dans la couche de vue et dans la couche logique.

Nous avons fait un contre-exemple simple ici, mais les Reactables sont extensibles et composables pour des scénarios de gestion d'état beaucoup plus complexes (c'est-à-dire récupération de données, formulaires, etc...). Consultez la documentation pour en savoir plus !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!