Aller au contenu principal

État & Reducer

Cette partie est destinée aux personnes qui explorent le code de Lunatic. L'objectif est d'offrir une version généraliste du fonctionnement de la bibliothèque.

Le reducer​

En son cœur Lunatic repose sur un système de reducer qui peut recevoir plusieurs actions. L'état lié à ce reducer est documenté via un type TypeScript.

Initialisation​

Cette action (ActionKind.On_INIT) est lancée lorsque le composant utilisant useLunatic() est monté et permet d'effectuer plusieurs opérations pour initialiser les données qui vont servir pour la suite.

  • Boucle sur les variables définies dans la source pour les sauvegarder dans un dictionnaire (LunaticVariableStore)
  • Extrait depuis les composants les différentes pages et crée un objet contenant la liste des composants groupé par nom de page.
  • Décompose la valeur d'initialPage pour générer l'objet qui représentera l'état de la navigation (pager).
  • Génère une fonction executeExpression() qui permettra d'exécuter les expressions VTL

Ces actions (ActionKind.GO_PREVIOUS_PAGE, ActionKind.GO_NEXT_PAGE, ActionKind.GO_TO_PAGE) sont déclenchées par les méthodes de navigation. Lors de cette opération un nouveau pager va être calculé en fonction de la position dans le formulaire. Cette action est appelé avec les données suivantes :

  • name, nom de la variable modifiée
  • value, nouvelle valeur
  • iteration, l'itération sur laquelle on se trouve (cette itération est représentée sous forme d'un tableau, car dans le cas du PairWise il y a 2 niveaux de profondeur)

Changement de valeurs​

Cette action (ActionKind.HANDLE_CHANGES) est déclenchée lorsque l'utilisateur modifie une ou plusieurs valeurs dans le formulaire. Lors de cette opération les valeurs changées vont être enregistrées par le dictionnaire.

Génération des composants​

Lorsque l'état change Lunatic va régénérer la liste des composants à afficher. Cette génération se fait au travers de la fonction getComponentsFromState() qui prendra l'état en paramètre et renverra la liste des composants (de leurs propriétés). Pour comprendre comment se passe ce remplissage, vous pouvez regarder le code de la méthode fillComponent qui sépare la logique.