Kuinka mallinnat async/loading-tilaa?

Question

Accepted Answer

Asynkroniset operaatiot (API-kutsut) voivat johtaa useisiin eri tuloksiin, joten sinun täytyy mallintaa **enemmän kuin vain data** — sinun täytyy edustaa loading-, success- ja error-tiloja. Hyvä mallinnus estää UI-virheet kuten vanhojen tietojen näyttämisen tai palautteen puuttumisen. ## Naivi lähestymistapa ja sen puutteet ```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. ``` Riippumattomat flagit mahdollistavat ristiriitaiset yhdistelmät (loading *ja* error *ja* data samanaikaisesti), joiden pitäisi olla mahdottomia — tämä on sekaannuksia aiheuttavien UI-virheiden lähde. ## Parempi: status-enum (pieni 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 }); } } ``` Yksittäinen `status`-kenttä tekee tilat **keskenään poissulkeviksi** — et voi olla samanaikaisesti loading ja errored. Renderöinti tulee puhtaaksi switch-lauseeksi: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Älä unohda usein unohdettuja tiloja ```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) ``` ## Paras lähestymistapa palvelintietoihin: käytä kirjastoa ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Palvelintilan kirjastot tarjoavat nämä tilat (plus caching, refetch, stale-while-revalidate) valmiiksi — yleensä parempi kuin omasta koodista valmistaminen. ## Miksi se on tärkeää Asynkronisen tilan oikea mallinnus — yksittäisenä status-arvona löyhien boolean-arvojen sijaan — eliminoi kokonaisen luokan UI-virheistä (ristiriitaiset tilat, puuttuva loading/error/empty-palaute) ja tekee renderöintilogiikasta puhtaan ja kattavan. Täydellisen tilajoukon tunnistaminen (idle, loading, success, error, empty, refetching) johtaa parempaan UX:iin, ja tietäminen siitä, että palvelintilan kirjastot käsittelevät kaikki nämä asiat, on se mikä pitää data-fetching-koodin yksinkertaisena ja kestävänä.