Hogyan modellezed az async/loading állapotot?

Question

Accepted Answer

Az aszinkron műveletek (API hívások) több lehetséges kimenetellel rendelkeznek, így **több mint csak az adatokat** kell modellezned — az betöltés, siker és hibás állapotokat kell reprezentálnod. Ennek jó modellezése megelőzi az UI hibákat, mint például az elavult adatok megjelenítése vagy visszajelzés hiánya. ## The naive approach and its flaws ```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. ``` A független jelzők ellentmondásos kombinációkat (betöltés *és* hiba *és* adat egyszerre) engedélyeznek, amelyek lehetetlenek kellene legyenek — a zavaró UI hibák forrása. ## Better: a status enum (a small 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 }); } } ``` Egy egyedi `status` mező az állapotokat **kölcsönösen kizáróvá** teszi — nem lehetsz egyszerre betöltés és hiba állapotban. A megjelenítés tiszta switch-sé válik: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Don't forget the often-missed states ```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) ``` ## The best approach for server data: use a library ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` A szerver-állapot könyvtárak ezeket az állapotokat (plusz gyorsítótárazás, refetch, stale-while-revalidate) azonnal biztosítják — általában jobb, mint a saját fejlesztés. ## Miért fontos Az aszinkron állapot helyes modellezése — egyetlen status helyett laza booleanok helyett — kiküszöböl egy egész UI hiba osztályt (ellentmondásos állapotok, hiányzó betöltés/hiba/üres visszajelzés) és a megjelenítési logikát tiszta és kimerítő teszi. Az állapotok teljes készletének felismerése (idle, loading, success, error, empty, refetching) jobb UX-hez vezet, és az a tudás, hogy a szerver-állapot könyvtárak ezt mind kezelik, az, ami az adatlekérési kódot egyszerűen és robusztusán tartja.