État et messages

Deux rôles distincts

x4js sépare nettement deux choses :

	Ce que c’est	Outil
État	ce qui est en ce moment	State
Événement	ce qui vient de se passer	événements de composant, événements globaux

On n’utilise pas l’état pour déclencher une action, et on n’utilise pas un événement pour conserver une information.

State : l’état courant

Un état est un objet ordinaire, rendu observable par makeState.

import { makeState } from 'x4js';

const state = makeState( {
  selectedId: "",
  connected: false,
});

Il se modifie directement, comme n’importe quel objet :

state.connected = true;

Pour réagir à un changement, on s’abonne. change signale toute modification, avec le chemin de la valeur et sa nouvelle valeur :

state.on( "change", ( ev ) => console.log( ev.path, ev.value ) );

watch ne surveille qu’une valeur, et tout ce qu’elle contient :

const sub = state.watch( "connected", ( ev ) => console.log( ev.value ) );

// pour arrêter
sub.off( );

Il n’y a pas de réducteurs, d’actions ni de copies immuables à écrire. Gardez un état simple, et n’en faites pas un bus d’événements.

Événements globaux : ce qui concerne toute l’application

Un événement de composant relie deux objets proches : un bouton et la vue qui le contient. Un événement global s’adresse à toute l’application, sans que l’émetteur connaisse ceux qui écoutent.

N’importe quel code peut en émettre un :

import { Application } from 'x4js';

Application.fireGlobal( "device.updated", { id: 12 } );

Un composant s’y abonne avec onGlobalEvent. L’abonnement est retiré automatiquement quand le composant quitte la page.

import { BoxProps, VBox } from 'x4js';

class DeviceView extends VBox {
  constructor( props: BoxProps ) {
    super( props );

    this.onGlobalEvent( ( ev ) => {
      if( ev.msg=="device.updated" ) {
        this.refresh( ev.params.id );
      }
    });
  }

  private refresh( id: number ) {
    // ...
  }
}

Donnez aux messages des noms stables, à l’échelle de l’application : device.created, device.updated, device.deleted.

Pour une notification de création, de modification ou de suppression, transporter l’identifiant suffit souvent : celui qui reçoit le message va chercher l’objet à jour. Pour des données temps réel à haute fréquence, transporter la donnée elle-même est plus adapté.

Note

Un événement global représente le message, pas son transport. Qu’il vienne du même navigateur, d’un serveur ou d’un autre client, les vues n’ont pas à le savoir, et elles ne contiennent pas de code propre aux WebSockets.

Qui fait quoi

Élément	Rôle
Modèle	obtient ou modifie les données métier (accès au serveur)
State	représente l’état courant de l’application
Composant	présente cet état
Événement	communique ce qui se passe entre objets proches
Événement global	communique ce qui concerne toute l’application

Un modèle est une classe TypeScript ordinaire, exportée comme un module. Les vues n’appellent pas le serveur elles-mêmes : elles passent par un modèle.

N’ajoutez pas d’autres couches tant qu’elles ne résolvent pas un problème réel.