Jak modelujete asynchronní/načítací stav?

Question

Accepted Answer

Asynchronní operace (volání API) mají více možných výsledků, takže musíte modelovat **více než jen data** — musíte reprezentovat stavy načítání, úspěchu a chyby. Dobrý model těchto stavů zabraňuje chybám v UI, jako je zobrazování zastaralých dat nebo žádné zpětné vazby. ## Naivní přístup a jeho nedostatky ```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. ``` Nezávislé příznaky umožňují kontradiktory kombinace (načítání *a* chyba *a* data zároveň), které by měly být nemožné — zdroj matoucích chyb v UI. ## Lépe: enumerace statusu (malý stavový automat) ```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 }); } } ``` Jedniné pole `status` dělá stavy **vzájemně se vylučující** — nemůžete být zároveň v načítání a v chybě. Vykreslování se stává čistým switchem: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Nezapomeňte na často opomíjené stavy ```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) ``` ## Nejlepší přístup pro serverová data: použijte knihovnu ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Knihovy pro serverový stav poskytují tyto stavy (plus cachování, refetch, stale-while-revalidate) ihned z krabice — obvykle lépe než vlastní implementace. ## Proč to má smysl Správné modelování asynchronního stavu — jako jednoho statusu namísto volných boolean hodnot — eliminuje celou třídu chyb v UI (kontradiktory stavy, chybějící zpětná vazba pro načítání/chybu/prázdnotu) a činí logiku vykreslování čistou a vyčerpávající. Rozeznání úplné sady stavů (idle, loading, success, error, empty, refetching) vede k lepšímu UX, a vědomi, že knihovy pro serverový stav to všechno zvládají, je to, co udržuje kód pro načítání dat jednoduchý a robustní.