React Custom Hook State Machine: Zvládnutí abstrakce složité stavové logiky

S tím, jak se aplikace React rozrůstají v komplexnosti, může se správa stavu stát významnou výzvou. Tradiční přístupy používající `useState` a `useEffect` mohou rychle vést k zamotané logice a obtížně udržovatelnému kódu, zvláště při řešení složitých stavových přechodů a vedlejších efektů. Právě zde přicházejí na pomoc stavové automaty, a konkrétně vlastní React hooky, které je implementují. Tento článek vás provede konceptem stavových automatů, ukáže, jak je implementovat jako vlastní hooky v Reactu, a ilustruje výhody, které nabízejí pro vytváření škálovatelných a udržovatelných aplikací pro globální publikum.

Co je to stavový automat?

Stavový automat (nebo konečný stavový automat, FSM) je matematický model výpočtu, který popisuje chování systému definováním konečného počtu stavů a přechodů mezi těmito stavy. Představte si to jako vývojový diagram, ale s přísnějšími pravidly a formálnější definicí. Mezi klíčové koncepty patří:

• Stavy: Reprezentují různé podmínky nebo fáze systému.
• Přechody: Definují, jak se systém přesouvá z jednoho stavu do druhého na základě specifických událostí nebo podmínek.
• Události: Spouštěče, které způsobují stavové přechody.
• Počáteční stav: Stav, ve kterém systém začíná.

Stavové automaty vynikají v modelování systémů s dobře definovanými stavy a jasnými přechody. Příkladů je v reálném světě mnoho:

• Semafor: Cykluje stavy jako Červená, Žlutá, Zelená, s přechody spouštěnými časovači. Toto je celosvětově rozpoznatelný příklad.
• Zpracování objednávky: Objednávka v e-commerce může přecházet stavy jako „Čeká se“, „Zpracovává se“, „Odesláno“ a „Doručeno“. To platí univerzálně pro online prodej.
• Autentizační tok: Proces ověření uživatele by mohl zahrnovat stavy jako „Odhlášeno“, „Přihlašování“, „Přihlášeno“ a „Chyba“. Bezpečnostní protokoly jsou obecně konzistentní napříč zeměmi.

Proč používat stavové automaty v Reactu?

Integrace stavových automatů do vašich React komponent nabízí několik přesvědčivých výhod:

• Vylepšená organizace kódu: Stavové automaty vynucují strukturovaný přístup ke správě stavu, díky čemuž je váš kód предviditelnější a snáze pochopitelný. Už žádné špagety!
• Snížená složitost: Explicitním definováním stavů a přechodů můžete zjednodušit složitou logiku a vyhnout se nezamýšleným vedlejším efektům.
• Vylepšená testovatelnost: Stavové automaty jsou ze své podstaty testovatelné. Můžete snadno ověřit, že se váš systém chová správně, testováním každého stavu a přechodu.
• Zvýšená udržovatelnost: Deklarativní povaha stavových automatů usnadňuje úpravy a rozšiřování kódu, jak se vaše aplikace vyvíjí.
• Lepší vizualizace: Existují nástroje, které dokážou vizualizovat stavové automaty a poskytují jasný přehled o chování vašeho systému, což napomáhá spolupráci a porozumění mezi týmy s různými dovednostmi.

Implementace stavového automatu jako vlastního React Hooku

Pojďme si ukázat, jak implementovat stavový automat pomocí vlastního React Hooku. Vytvoříme jednoduchý příklad tlačítka, které může být ve třech stavech: `idle`, `loading` a `success`. Tlačítko začíná ve stavu `idle`. Po kliknutí přejde do stavu `loading`, simuluje proces načítání (pomocí `setTimeout`) a poté přejde do stavu `success`.

1. Definujte stavový automat

Nejprve definujeme stavy a přechody našeho stavového automatu tlačítka:

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Po 2 sekundách přejde do stavu success
      },
    },
    success: {},
  },
};

Tato konfigurace používá knihovnou agnostický (i když inspirovaný XState) přístup k definování stavového automatu. Logiku pro interpretaci této definice implementujeme sami ve vlastním hooku. Vlastnost `initial` nastavuje počáteční stav na `idle`. Vlastnost `states` definuje možné stavy (`idle`, `loading` a `success`) a jejich přechody. Stav `idle` má vlastnost `on`, která definuje přechod do stavu `loading`, když nastane událost `CLICK`. Stav `loading` používá vlastnost `after` k automatickému přechodu do stavu `success` po 2000 milisekundách (2 sekundy). Stav `success` je v tomto příkladu koncový stav.

2. Vytvořte vlastní Hook

Nyní vytvořme vlastní hook, který implementuje logiku stavového automatu:

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState({});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Tento hook `useStateMachine` přijímá definici stavového automatu jako argument. Používá `useState` ke správě aktuálního stavu a kontextu (kontext vysvětlíme později). Funkce `transition` přijímá událost jako argument a aktualizuje aktuální stav na základě definovaných přechodů v definici stavového automatu. Hook `useEffect` zpracovává vlastnost `after`, nastavuje časovače pro automatický přechod do dalšího stavu po uplynutí stanovené doby. Hook vrací aktuální stav, kontext a funkci `transition`.

3. Použijte vlastní Hook v komponentě

Nakonec použijme vlastní hook v React komponentě:

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success', // Po 2 sekundách přejde do stavu success
      },
    },
    success: {},
  },
};

const MyButton = () => {
  const { currentState, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    
      {buttonText}
    
  );
};

export default MyButton;

Tato komponenta používá hook `useStateMachine` ke správě stavu tlačítka. Funkce `handleClick` odesílá událost `CLICK`, když se na tlačítko klikne (a pouze pokud je ve stavu `idle`). Komponenta vykresluje různý text v závislosti na aktuálním stavu. Tlačítko je během načítání zakázáno, aby se zabránilo vícenásobným kliknutím.

Správa kontextu ve stavových automatech

V mnoha reálných scénářích potřebují stavové automaty spravovat data, která přetrvávají mezi stavovými přechody. Tato data se nazývají kontext. Kontext umožňuje ukládat a aktualizovat relevantní informace, jak stavový automat postupuje.

Rozšiřme náš příklad tlačítka tak, aby zahrnoval čítač, který se zvyšuje pokaždé, když se tlačítko úspěšně načte. Upravíme definici stavového automatu a vlastní hook pro správu kontextu.

1. Aktualizujte definici stavového automatu

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

Přidali jsme vlastnost `context` do definice stavového automatu s počáteční hodnotou `count` 0. Také jsme přidali akci `entry` do stavu `success`. Akce `entry` se provede, když stavový automat vstoupí do stavu `success`. Přijímá aktuální kontext jako argument a vrací nový kontext se zvýšeným `count`. `entry` zde ukazuje příklad úpravy kontextu. Protože jsou objekty Javascriptu předávány odkazem, je důležité vrátit *nový* objekt, spíše než mutovat původní.

2. Aktualizujte vlastní Hook

import { useState, useEffect } from 'react';

const useStateMachine = (stateMachineDefinition) => {
  const [currentState, setCurrentState] = useState(stateMachineDefinition.initial);
  const [context, setContext] = useState(stateMachineDefinition.context || {});

  const transition = (event) => {
    const stateDefinition = stateMachineDefinition.states[currentState];
    if (stateDefinition && stateDefinition.on && stateDefinition.on[event]) {
      setCurrentState(stateDefinition.on[event]);
    }
  };

  useEffect(() => {
    const stateDefinition = stateMachineDefinition.states[currentState];

    if(stateDefinition && stateDefinition.entry){
      const newContext = stateDefinition.entry(context);
      setContext(newContext);
    }

    if (stateDefinition && stateDefinition.after) {
      const timeoutKeys = Object.keys(stateDefinition.after);
      timeoutKeys.forEach(timeoutKey => {
        const timeout = parseInt(timeoutKey, 10);
        const nextState = stateDefinition.after[timeoutKey];
        const timer = setTimeout(() => {
          setCurrentState(nextState);
          clearTimeout(timer);
        }, timeout);

        return () => clearTimeout(timer); // Cleanup on unmount or state change
      });
    }
  }, [currentState, stateMachineDefinition.states, context]);

  return {
    currentState,
    context,
    transition,
  };
};

export default useStateMachine;

Aktualizovali jsme hook `useStateMachine`, aby inicializoval stav `context` pomocí `stateMachineDefinition.context` nebo prázdného objektu, pokud není kontext poskytnut. Také jsme přidali `useEffect` pro správu akce `entry`. Když má aktuální stav akci `entry`, provedeme ji a aktualizujeme kontext vrácenou hodnotou.

3. Použijte aktualizovaný Hook v komponentě

import React from 'react';
import useStateMachine from './useStateMachine';

const buttonStateMachineDefinition = {
  initial: 'idle',
  context: {
    count: 0,
  },
  states: {
    idle: {
      on: {
        CLICK: 'loading',
      },
    },
    loading: {
      after: {
        2000: 'success',
      },
    },
    success: {
      entry: (context) => {
        return { ...context, count: context.count + 1 };
      },
    },
  },
};

const MyButton = () => {
  const { currentState, context, transition } = useStateMachine(buttonStateMachineDefinition);

  const handleClick = () => {
    if (currentState === 'idle') {
      transition('CLICK');
    }
  };

  let buttonText = 'Click Me';
  if (currentState === 'loading') {
    buttonText = 'Loading...';
  } else if (currentState === 'success') {
    buttonText = 'Success!';
  }

  return (
    

      
        {buttonText}
      
      
Count: {context.count}
    
  );
};

export default MyButton;

Nyní přistupujeme k `context.count` v komponentě a zobrazujeme jej. Pokaždé, když se tlačítko úspěšně načte, se čítač zvýší.

Pokročilé koncepty stavových automatů

Zatímco náš příklad je poměrně jednoduchý, stavové automaty dokážou zpracovat mnohem složitější scénáře. Zde je několik pokročilých konceptů, které je třeba zvážit:

• Stráže: Podmínky, které musí být splněny, aby došlo k přechodu. Například přechod může být povolen pouze v případě, že je uživatel ověřen, nebo pokud určitá datová hodnota překročí určitou prahovou hodnotu.
• Akce: Vedlejší účinky, které se provedou při vstupu do stavu nebo při jeho opuštění. Mohly by to být volání API, aktualizace DOM nebo odesílání událostí jiným komponentám.
• Paralelní stavy: Umožňují modelovat systémy s více souběžnými aktivitami. Například přehrávač videa může mít jeden stavový automat pro ovládání přehrávání (přehrát, pozastavit, zastavit) a druhý pro správu kvality videa (nízká, střední, vysoká).
• Hierarchické stavy: Umožňují vnořovat stavy do jiných stavů a vytvářet hierarchii stavů. To může být užitečné pro modelování složitých systémů s mnoha souvisejícími stavy.

Alternativní knihovny: XState a další

Zatímco náš vlastní hook poskytuje základní implementaci stavového automatu, několik vynikajících knihoven může proces zjednodušit a nabídnout pokročilejší funkce.

XState

XState je oblíbená knihovna JavaScript pro vytváření, interpretaci a provádění stavových automatů a stavových grafů. Poskytuje výkonné a flexibilní API pro definování složitých stavových automatů, včetně podpory pro stráže, akce, paralelní stavy a hierarchické stavy. XState také nabízí vynikající nástroje pro vizualizaci a ladění stavových automatů.

Další knihovny

Mezi další možnosti patří:

• Robot: Lehká knihovna pro správu stavu se zaměřením na jednoduchost a výkon.
• react-automata: Knihovna speciálně navržená pro integraci stavových automatů do React komponent.

Výběr knihovny závisí na specifických potřebách vašeho projektu. XState je dobrou volbou pro složité stavové automaty, zatímco Robot a react-automata jsou vhodné pro jednodušší scénáře.

Doporučené postupy pro používání stavových automatů

Chcete-li efektivně využívat stavové automaty ve svých aplikacích React, zvažte následující doporučené postupy:

• Začněte v malém: Začněte s jednoduchými stavovými automaty a postupně zvyšujte složitost podle potřeby.
• Vizualizujte svůj stavový automat: Použijte vizualizační nástroje, abyste získali jasné porozumění chování vašeho stavového automatu.
• Pište komplexní testy: Důkladně otestujte každý stav a přechod, abyste zajistili, že se váš systém chová správně.
• Dokumentujte svůj stavový automat: Jasně dokumentujte stavy, přechody, stráže a akce vašeho stavového automatu.
• Zvažte internacionalizaci (i18n): Pokud je vaše aplikace zaměřena na globální publikum, ujistěte se, že je logika stavového automatu a uživatelské rozhraní správně internacionalizováno. Například použijte samostatné stavové automaty nebo kontext pro správu různých formátů dat nebo symbolů měn na základě nastavení uživatele.
• Přístupnost (a11y): Zajistěte, aby byly vaše stavové přechody a aktualizace uživatelského rozhraní přístupné uživatelům s postižením. Používejte atributy ARIA a sémantické HTML, abyste poskytli správný kontext a zpětnou vazbu asistenčním technologiím.

Závěr

Vlastní React hooky kombinované se stavovými automaty poskytují výkonný a efektivní přístup ke správě složité stavové logiky v aplikacích React. Abstrahováním stavových přechodů a vedlejších efektů do dobře definovaného modelu můžete zlepšit organizaci kódu, snížit složitost, zlepšit testovatelnost a zvýšit udržovatelnost. Ať už implementujete svůj vlastní vlastní hook nebo využíváte knihovnu, jako je XState, začlenění stavových automatů do vašeho pracovního postupu React může výrazně zlepšit kvalitu a škálovatelnost vašich aplikací pro uživatele po celém světě.