Machines à états finis en réaction

Que sont Les machines à états finis et comment pouvez-vous les utiliser dans React pour faciliter la compréhension de la logique compliquée et des interfaces utilisateur? Dans cet article, nous tenterons de répondre à cette question en construisant un lecteur vidéo dans React.

Lorsque j'ai commencé à construire le lecteur vidéo, je pensais pour la première fois à savoir s'il était joué par ou en pause . OK, je peux utiliser un booléen pour ça, non? Cependant, pendant le chargement de la vidéo, ce n'est pas vraiment qui joue ou en pause pour le moment… c’est qui charge . Maintenant, j'avais deux valeurs booléennes. Et si cela ne pouvait pas charger la vidéo? Qu'est-ce qui se passe quand il atteint la fin de la vidéo? Vous pouvez voir comment quelque chose apparemment simple devient plus difficile à modéliser.

Continuez à lire pour voir comment XState de David K. Piano peut nous aider à modéliser cet état compliqué en Réagissant définissant clairement le flux d'un état à un autre

La version finale du code référencé dans cet article est disponible ici .

Qu'est-ce qu'une machine à états finis?

] Dans l'introduction, j'ai mentionné différents "états" dans lesquels notre lecteur vidéo pourrait se trouver:

• loading : état initial qui se produit pendant le chargement de la vidéo.
• ready : Chargement réussi
  – en pause : La lecture de la vidéo est actuellement en pause
  – en cours de lecture : La lecture de la vidéo est en cours.
  – est terminée . : La vidéo a atteint la fin de la piste.
• échec : Pour une raison quelconque, le chargement de la vidéo iled.

J'ai énuméré six états différents dans lesquels notre lecteur vidéo peut se trouver. Remarquez comment il s'agit d'un nombre fini fini, et non d'un nombre infini ? Vous savez maintenant d’où vient la Finite de machine à états finis .

Une machine à états finis

Source link