Si e modelon async/gjendjen e ngarkimit?

Question

Accepted Answer

Operacionet asinkrone (thirrjet API) kanë shumë rezultate të mundshme, kështu që duhet të modelosh **më shumë se vetëm të dhënat** — duhet të përfaqësosh gjendjet e ngarkimit, suksesit dhe gabimit. Modelimi i mirë parandalon gabimet e ndërfaqes përdoruesit, si shfaqja e të dhënave të vjetra ose pa përgjigje. ## Qasja naive dhe mangësitë e saj ```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. ``` Flamet e pavarura lejojnë kombinime kontradiktore (ngarkimi *dhe* gabim *dhe* të dhëna njëkohësisht) që duhet të jenë të pamundura — një burim i gabimeve konfuze në ndërfaqe. ## Më mirë: një enum statusi (një makinë gjendjeje e vogël) ```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 }); } } ``` Nje fushë e vetme `status` e bën gjendet **reciprokisht ekskluzive** — nuk mund të jesh njëkohësisht në ngarkimin dhe gabimin. Renderimi bëhet një switch i pastër: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Mos harro gjendet shpesh të neglizhuar ```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) ``` ## Qasja më e mirë për të dhënat e serverit: përdor një bibliotekë ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Biblioteket e gjendjeve të serverit ofrojnë këto gjendje (plus cache-in, refetch, stale-while-revalidate) jashtë kutisë — zakonisht më mirë se shkruarja manuale. ## Pse është e rëndësishme Modelimi i saktë i gjendjes asinkrone — si një status i vetëm dhe jo boolean të lirë — eliminon një klasë të tërë gabimesh të ndërfaqes (gjendet kontradiktore, përgjigje të munguara të ngarkimit/gabimit/boshe) dhe e bën logjikën e renderimit të pastër dhe shteruese. Përvijim i plotë i gjendjes (idle, ngarkimi, sukses, gabim, boshe, ri-ngarkimi) çon në një përvojë më të mirë përdoruesi, dhe njohja se biblioteket e gjendjeve të serverit trajtojnë të gjithë këtë është ajo që e mban kodin e kërkimit të të dhënave të thjeshtë dhe të fuqishëm.