Unamudu vipi hali ya async/kupakia?

Question

Accepted Answer

Operesheni za async (API calls) zina matokeo mengi yanayowezekana, kwa hiyo lazima umudu **zaidi ya data tu** — unahitaji kuwakilisha hali za kupakia, mafanikio, na hitilafu. Kumudu vizuri kunazuia bugs za UI kama kuonyesha data ya zamani au hakuna maoni. ## Njia ya kiwanyezi na kasoro zake ```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. ``` bendera huru huruhusu mchanganyiko yasiyolingani (kupakia *na* kosa *na* data wakati mmoja) ambayo yajifunze kuwa haiwezekani — chanzo cha bugs za UI zinazochanganya. ## Nzuri: enum ya status (mashine ndogo ya hali) ```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 }); } } ``` Shamba moja la `status` lina hali **inayojitenga kila mmoja** — huwezi kuwa kupakia na kosa wakati mmoja. Kuonyesha kunakuwa switch safi: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## Usisahau hali ambazo mara nyingi hukamatwa ```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) ``` ## Njia nzuri zaidi kwa data ya severi: tumia maktaba ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` Maktaba za hali ya severi hutoa hali hizi (pamoja na caching, refetch, stale-while-revalidate) kwa haraka — kawaida nzuri kuliko kutengeneza kwa mkono. ## Kwa nini inastahili Kumudu hali ya async kwa usahihi — kama status moja badala ya boolean wazi — kuondoa aina nzima ya bugs za UI (hali yasiyolingani, maoni yaliyo na kung'oa/kosa/tupu) na kufanya mantiki ya kuonyesha kuwa safi na kumalizia. Kutambua seti kamili ya hali (idle, kupakia, mafanikio, kosa, tupu, kupakia upya) husababisha UX nzuri, na kujua kwamba maktaba za hali ya severi hufanya hii yote ni kile kinachoweka code ya kuchakata data kuwa rahisi na imara.