Tilakoneen käyttöliittymä: Rakenna deterministisiä, virheettömiä käyttöliittymiä
Opi kuinka visuaaliset tilakoneet eliminoivat käyttöliittymän mahdottomat tilat, yksinkertaistavat monimutkaisia vuorovaikutteisia komponentteja ja luovat deterministisiä, virheellisiä käyttöliittymiä React:ssä.
Core Takeaway
Käyttöliittymän tilakone on matemaattinen malli, joka kuvaa kaikkia kelvollisia tiloja, joita liitäntäkomponentti voi olla, sekä käyttäjän tapahtumien tai järjestelmäolosuhteiden laukaisemat nimenomaiset siirtymät näiden tilojen välillä. Tilakoneet eliminoivat kokonaisia käyttöliittymävirheluokkia tekemällä "mahdottomista tiloista mahdottomaksi" – latauspyöräsi ja onnistumismerkkisi eivät voi näkyä samanaikaisesti, jos tilakoneesi kieltää tämän yhdistelmän.
Ongelmatilan koneet ratkaisevat
Useimmat käyttöliittymävirheet ovat peräisin komponenteista, jotka voivat siirtyä loogisesti mahdottomiin tiloihin. Klassinen esimerkki: lomakkeen lähetyspainike, jolla ei ole nimenomaista tilamallia, voi olla samanaikaisesti "lataus"- ja "pois käytöstä" -tilassa kahdesta erillisestä loogisesta lipusta. Tilakone estää tämän vaatimalla, että komponentti on aina täsmälleen yhdessä tarkasti määritellyssä tilassa milloin tahansa.
- "Boolean lippu helvetti" — isLadataan, isDisabled, isError, isSuccess kaikki ristiriitaisia
- Kilpailuolosuhteet, joissa nopeat käyttäjät laukaisevat useita tiloja samanaikaisesti
- Siirtymävirheet, joissa animaatiot alkavat vääristä välipaikoista
- Kehittäjän kognitiivinen kuormitus n × n -merkkiyhdistelmien seurannasta kooditarkistuksessa
Core State Machine -konseptit
Tilakoneet koostuvat rajallisesta joukosta tiloja, tapahtumien sanastoa, joka voi laukaista siirtymiä, ja suojaehdoista, jotka määrittävät, onko siirtymä sallittu.
osavaltioissa
Jokainen tila edustaa komponentin tiettyä tilaa. Esimerkki tiedonhakukomponentista: tyhjäkäynti, lataus, onnistuminen, virhe, päivitys.
Tapahtumat / siirtymät
Tapahtumat laukaisevat tilamuutoksia. "LÄHETÄ" siirtää lomakkeen valmiustilasta lataukseen. "SUCCESS" siirtyy latauksesta menestykseen. "ERROR" siirtyy latauksesta virheeseen.
Vartijat
Edellytykset, joiden on oltava totta, jotta voit siirtyä tuleen. "LÄHETÄ"-tapahtuma voi laukaista joutokäynnin → lataussiirtymän vain, jos lomakkeen tarkistussuoja läpäisee.
Konteksti / Laajennettu tila
Aputiedot, joita kone kuljettaa (käyttäjän syöttöarvot, virheilmoitukset, ladatut tiedot) nykyisen tilan nimen rinnalla.
Tilakoneet ExodeUI:ssä
ExodeUI tarjoaa visuaalisen solmukuvaajan tilakoneeditorin. Piirrät tiloja ympyröinä, yhdistät ne tapahtumia kuvaavilla nuolilla ja liität jokaiseen tilaan kevätanimaatioita ja visuaalisia ominaisuuksien muutoksia. Kone on tallennettu .exode-tiedostoon: React:ssä lataat sen ExodeUICanvasilla ja ohjaat sen tulojen kautta ja Swiftissä ExodeUIControllerin kautta.
Tuotannon toteutuskatkelma
import { ExodeUICanvas } from 'exodeui';
// Springs, states and timing live in the .exode file (designed in the
// editor). Your code passes inputs in and hears events back.
export function AuthFlow() {
return (
<ExodeUICanvas
src="/auth_flow.bexode"
onTrigger={(name) => console.log('ExodeUI event:', name)}
/>
);
}