Kako modeliraš async/stanje nalaganja?

Question

Accepted Answer

Asinhrone operacije (API klici) imajo več mogočih izhodov, zato moraš modelirati **več kot samo podatke** — potrebno je predstaviti stanja nalaganja, uspeha in napake. Dobro modeliranje preprečuje UI napake, kot so prikazovanje zastarelo podatkov ali nobena povratna informacija. ## Naivni pristop in njegove napake ```js // ❌ separate booleans — can represent impossible combinations const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // What does { loading: true, error: "x", data: [...] } even mean? An invalid state. ``` Neodvisne zastave omogočajo protislovne kombinacije (nalaganje *in* napaka *in* podatki hkrati), ki bi morali biti nemogoči — vir zmotnih UI napak. ## Bolje: status enum (majhen state machine) ```js // ✅ a single `status` makes states mutually exclusive const [state, setState] = useState({ status: "idle", data: null, error: null }); // status is one of: 'idle' | 'loading' | 'success' | 'error' async function load() { setState({ status: "loading", data: null, error: null }); try { const data = await api.get(); setState({ status: "success", data, error: null }); } catch (e) { setState({ status: "error", data: null, error: e.message }); } } ``` Eno polje `status` naredi stanja **medsebojno izključna** — ne moreš biti hkrati v nalaganju in napaki. Renderiranje postane čist switch: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Ne pozabi pogosto spregledanih stanj ```text idle — hasn't started yet (vs loading) empty — succeeded but no results (show "No items" not a blank screen) refetching— has old data AND is loading new (show data + a subtle spinner) ``` ## Najboljši pristop za podatke strežnika: uporabi knjižnico ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Knjižnice za stanje strežnika zagotavljajo ta stanja (poleg predpomnenja, ponovnega pridobivanja, stale-while-revalidate) že v paketu — običajno bolje kot ročno pisanje. ## Zakaj je to pomembno Pravilno modeliranje asinhronega stanja — kot enotnega statusa namesto svobodnih logičnih vrednosti — izloči cel razred UI napak (protislovna stanja, manjkajoče povratne informacije nalaganja/napake/prazno) in naredi logiko renderiranja čisto in izčrpno. Prepoznavanje celotne količine stanj (idle, nalaganje, uspeh, napaka, prazno, ponovno nalaganje) vodi do boljše izkušnje uporabnika, in vedenje, da knjižnice za stanje strežnika rokujejo z vsem tem, je ono, kar drži kodo za pridobivanje podatkov preprosto in robustno.