Conas a dhéanann tú staid asynchron/ualaigh a dhúileagan?

Question

Accepted Answer

Bíonn torthaí éagsúla ar bhealach ag oibríochtaí asynchron (glaoithe API), mar sin ní mór duit **níos mó ná na sonraí amháin a dhúileagan** — caithfidh tú staid ualaigh, sochair agus earráid a léiriú. Má dhúileagann tú é seo go maith, coisceann sé fabhtanna UI ar nós sonraí seanaimseartha a thaispeáint nó gan aiseolas ar bith. ## 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. ``` Ligfidh bratacha neamhspleácha do chomhpháirtíochtaí contrártha (á ualú *agus* earráid *agus* sonraí ag an am céanna) ar a bheidh sé dodhéanta — foinse fabhtanna UI mearbhall. ## 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 }); } } ``` Torann `status` aonair na staid **coiméadach i ndiaidh a chéile** — ní féidir leat a bheith i staid ualaigh agus i staid earráid ag an am céanna. Tugann an rindreáil switch geal: ```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 }); ``` Soláthraíonn leabharlanna server-state na staid seo (agus taisce, athuachaint, stale-while-revalidate) as an gceist — de ghnáth níos fearr ná a dhéanamh de láimh. ## Cén fáth a bhfuil sé tábhachtach Staid asynchron a dhúileagan go cuí — mar status singil seachas booleánacha scaoilte — imircím an fad ar fad de fabhtanna UI (staid contrártha, aiseolas ualaigh/earráid/folamh ar iarraidh) agus déanann sé loighic rindreála geal agus iomlán. Dá dtuganna tú an tacar iomlán de staid (idle, loading, success, error, empty, refetching), bíonn UX níos fearr ann, agus má thuigeann tú go ndéanann leabharlanna server-state gach rud seo, is é sin a choinníonn cód taisce-fhála simplí agus láidir.