நீ async/loading நிலை மாதிரியை எவ்வாறு வடிவமைக்கிறாய்?

Question

Accepted Answer

ஒப்பிடிக்கையிலான செயல்பாடுகள் (API அழைப்புகள்) பல சாத்தியமான முடிவுகளை கொண்டுள்ளன, எனவே நீ **தரவு மட்டுமல்ல** வடிவமைக்க வேண்டும் — நீ சுமைப்பு, வெற்றி, மற்றும் பிழை நிலைகளை பிரதிநிதித்வம் செய்ய வேண்டும். நன்றாக வடிவமைப்பது பயனுள்ள இடைமுகப் பிழைகளைத் தடுக்கிறது, அதாவது பழையவற்றைக் காட்டுவது அல்லது பின்னூட்டமில்லை. ## மூடி அணுகுமுறை மற்றும் அதன் குறைகள் ```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. ``` ச்சாரை கொটி முரணான சமவய மாதிரி (சுமைப்பு *மற்றும்* பிழை *மற்றும்* தரவு ஒரே நேரத்தில்) அனுமதிக்கிறது, அவை சாத்தியமற்றதாக இருக்க வேண்டும் — குழப்பமான பயனுள்ள இடைமுக பிழைகளின் மூலாதாரம். ## மேலே: ஒரு நிலை enum (ஒரு சிறிய நிலை இயந்திரம்) ```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 }); } } ``` ஒரு ஆலோசனை `status` வசனம் நிலைகளை **பரஸ்பர பிரத்येक** உயர்த்துகிறது — நீ சுமைப்பு மற்றும் பிழை இருவரும் இல்லை. வரைபடம் ஒரு சாफ் மாற்றாகும்: ```jsx switch (state.status) { case "loading": return ; case "error": return ; case "success": return ; default: return ; } ``` ## அடிக்கடி தவறாக வரும் நிலைகளை மறந்துவிடாதீர் ```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) ``` ## சேவையக தரவுக்கான சிறந்த அணுகுமுறை: ஒரு நூலகத்தைப் பயன்படுத்தவும் ```jsx // React Query / SWR model all of this for you const { data, isLoading, isError, error } = useQuery({ queryKey: ["x"], queryFn }); ``` சேவையக-நிலை நூலகங்கள் இந்த நிலைகளை (கூட ஞாபகம், மறு-பெறுதல், stale-while-revalidate) கட்டத்தில் வழங்குகின்றன — பொதுவாக கைமுறையாக மேம்படுத்துவதை விட சிறந்தது. ## இது ஏன் முக்கியமாக உள்ளது ச்சாராக-நிலையை முறையாக வடிவமைப்பது — ஒரு ஒரு நிலை பதிலாக தளர்ந்த வெளிப்பாடுகள் — பயனுள்ள இடைமுக பிழைகளின் முழு உயிர்ப்பை நீக்குகிறது (முரணான நிலைகள், இல்லாத சுமைப்பு/பிழை/வெற்று பின்னூட்டம்) மற்றும் வரைபட தர্க்கத்தை சுவாரஸ் மற்றும் முழுமையாக செய்கிறது। நிலைகளின் முழு தொகுப்பை (idle, சுமைப்பு, வெற்றி, பிழை, வெற்று, மீண்டும் சுமைப்பு) அறிந்துகொள்வது சிறந்த வெளிப்பாடு பொது வளர்ச்சிக்கு வழிவகுக்கிறது, மற்றும் சேவையக-நிலை நூலகங்கள் இந்த அனைத்தையும் கையாளுகின்றன என்பதை அறிந்துகொள்வது தரவு-பெறுதல் குறியீட்டை சிறந்த மற்றும் வலுவாக வைத்திருப்பது.