1. Redux टूलकिट में Async लॉजिक का परिचय

Redux में एसिंक्रोनस लॉजिक को संभालने में अक्सर बहुत सारे बॉयलरप्लेट कोड शामिल होते हैं, जैसे विभिन्न स्थितियों (लोडिंग, सफलता, त्रुटि) को संभालने के लिए एक्शन प्रकार, एक्शन क्रिएटर्स और रिड्यूसर बनाना। Redux टूलकिट createAsyncThunk के साथ इसे सरल बनाता है, जो आपको न्यूनतम सेटअप के साथ अतुल्यकालिक संचालन के लिए "थंक" को परिभाषित करने की अनुमति देता है।

createAsyncThunk:

• स्वचालित रूप से लंबित, पूर्ण और अस्वीकृत कार्रवाई प्रकार उत्पन्न करता है।
• एपीआई अनुरोधों जैसे दुष्प्रभावों को संभालना आसान बनाता है।
• createSlice का उपयोग करके बनाए गए स्लाइस के साथ सहजता से एकीकृत होता है।

2. एपीआई कॉल के लिए createAsyncThunk का उपयोग करना

आइए एक सार्वजनिक एपीआई से डेटा लाने और विभिन्न लोडिंग स्थितियों को प्रबंधित करने के लिए एक एसिंक थंक बनाने की प्रक्रिया पर चलते हैं।

चरण 1: एक सरल एपीआई सेवा स्थापित करना
इस उदाहरण को प्रदर्शित करने के लिए हम एक निःशुल्क सार्वजनिक एपीआई का उपयोग करेंगे। आइए मान लें कि हमारे पास एक एपीआई एंडपॉइंट है जो पोस्ट की एक सूची लौटाता है।

चरण 2: एक एसिंक थंक बनाना
सबसे पहले, फीचर्स/पोस्ट डायरेक्टरी के अंदर पोस्टस्लाइस.जेएस नामक एक नई स्लाइस फ़ाइल बनाएं। हम पोस्ट को एसिंक्रोनस रूप से लाने के लिए createAsyncThunk का उपयोग करेंगे।

// src/features/posts/postsSlice.js
import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';

// Async thunk to fetch posts from an API
export const fetchPosts = createAsyncThunk('posts/fetchPosts', async () => {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const data = await response.json();
  return data; // This will be the 'fulfilled' action payload
});

const postsSlice = createSlice({
  name: 'posts',
  initialState: {
    posts: [],
    status: 'idle', // idle | loading | succeeded | failed
    error: null,
  },
  reducers: {
    // Optional: add reducers for synchronous actions
  },
  extraReducers: (builder) => {
    builder
      .addCase(fetchPosts.pending, (state) => {
        state.status = 'loading';
      })
      .addCase(fetchPosts.fulfilled, (state, action) => {
        state.status = 'succeeded';
        state.posts = action.payload;
      })
      .addCase(fetchPosts.rejected, (state, action) => {
        state.status = 'failed';
        state.error = action.error.message;
      });
  },
});

export default postsSlice.reducer;

स्पष्टीकरण:

createAsyncThunk: यह फ़ंक्शन दो तर्क लेता है: एक स्ट्रिंग एक्शन प्रकार और एक एसिंक्रोनस फ़ंक्शन। एसिंक फ़ंक्शन वह जगह है जहां एपीआई कॉल होती है। जब वादा पूरा हो जाता है, तो डेटा वापस कर दिया जाता है और पूर्ण कार्रवाई पेलोड के रूप में स्वचालित रूप से भेज दिया जाता है।

extraReducers: इसका उपयोग createAsyncThunk द्वारा उत्पन्न क्रियाओं को संभालने के लिए किया जाता है। हम तीन स्थितियों का प्रबंधन करते हैं: लंबित, पूर्ण और अस्वीकृत।

3. थंक्स को घटकों में एकीकृत करना

अब, रिएक्ट घटक में फ़ेचपोस्ट थंक का उपयोग करें और डेटा प्रदर्शित करें।

चरण 1: एक पोस्टलिस्ट घटक बनाएं
फीचर्स/पोस्ट निर्देशिका में एक PostsList.js घटक बनाएं:

// src/features/posts/PostsList.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { fetchPosts } from './postsSlice';

const PostsList = () => {
  const dispatch = useDispatch();
  const posts = useSelector((state) => state.posts.posts);
  const status = useSelector((state) => state.posts.status);
  const error = useSelector((state) => state.posts.error);

  useEffect(() => {
    if (status === 'idle') {
      dispatch(fetchPosts());
    }
  }, [status, dispatch]);

  let content;

  if (status === 'loading') {
    content = 
Loading...
;
  } else if (status === 'succeeded') {
    content = (
      

{posts.map((post) => (
• {post.title}
))}

{error}

स्पष्टीकरण:

जब घटक माउंट होता है तो यूज़इफ़ेक्ट हुक फ़ेचपोस्ट भेजता है, लेकिन केवल तभी जब वर्तमान स्थिति 'निष्क्रिय' हो।
यह निर्धारित करने के लिए स्थिति की जाँच की जाती है कि कौन सी सामग्री प्रस्तुत की जाए (स्पिनर लोड करना, पोस्ट की सूची, या त्रुटि संदेश)।

चरण 2: ऐप में पोस्टलिस्ट जोड़ें

पोस्टलिस्ट घटक को शामिल करने के लिए मुख्य App.js फ़ाइल को अपडेट करें:

// src/App.js
import React from 'react';
import PostsList from './features/posts/PostsList';

function App() {
  return (
    

      
    
  );
}

export default App;

4. Async थंक्स के लिए सर्वोत्तम अभ्यास

घटकों में भारी तर्क से बचें: अतुल्यकालिक तर्क को संभालने के लिए थंक भेजकर घटकों को साफ रखें।
केंद्रीयकृत त्रुटि प्रबंधन: प्रत्येक घटक में तर्क को दोहराने के बजाय अपने स्लाइस में त्रुटियों को संभालें।
डेटा को सामान्यीकृत करें: जटिल डेटा संरचनाओं को कुशलतापूर्वक प्रबंधित करने के लिए नॉर्मलिज़र जैसी लाइब्रेरी का उपयोग करके राज्य आकार को सामान्य करने पर विचार करें।
मेमोइज़ चयनकर्ता: बेहतर प्रदर्शन के लिए चयनकर्ताओं को मेमोइज़ करने के लिए पुनः चयन से createSelector का उपयोग करें।

5. निष्कर्ष और अगले चरण
इस भाग में, हमने पता लगाया कि createAsyncThunk का उपयोग करके Redux टूलकिट में एसिंक्रोनस लॉजिक को कैसे प्रबंधित किया जाए। हमने सीखा कि एसिंक थंक कैसे बनाएं, विभिन्न स्थितियों को कैसे संभालें और एक घटक में इसका उपयोग कैसे करें। अगले भाग में, हम RTK क्वेरी के बारे में जानेंगे - डेटा लाने और कैशिंग के लिए एक शक्तिशाली उपकरण जो Redux विकास को और सरल बनाता है।

_
भाग 3 के लिए बने रहें: आरटीके क्वेरी का परिचय!_