मैं प्रतिक्रिया-रेडक्स में HTTP अनुरोध कैसे करूं?

Question

मैं अभी प्रतिक्रिया के साथ शुरू कर रहा हूं और मैं थोड़ा सा खो गया हूं। मैं एक लॉगिन पेज बनाने और http पोस्ट अनुरोध करने की कोशिश कर रहा हूं। अभी मैं सिर्फ का HTTP अनुरोध काम कर रहे किसी भी प्रकार प्राप्त करने के लिए कोशिश कर रहा हूँ, इसलिए मैं अनुरोध बिन उपयोग कर रहा हूँ और मैं एक NPM पैकेज के लिए डॉक्स में इस बुनियादी कार्रवाई (https://www.npmjs.com/package/redux-react-fetch) में पाया गया:

export function updateTicket(ticketId, type, value){ 
    return { 
    type: 'updateArticle', 
    url: `http://requestb.in/1l9aqbo1`, 
    body: { 
     article_id: ticketId, 
     title: 'New Title' 
    }, 
    then: 'updateTicketFinished' 
    } 
} 

तो, के बाद एक कार्रवाई लिखना, मैं क्या करूँ? मैं वास्तव में अपने ऐप को कॉल करने और उस क्रिया का उपयोग करने के लिए कैसे प्राप्त करूं? एनपीएम पैकेज के लिए दस्तावेज़ मेरे स्टोर में एक राज्य स्थापित करने के बारे में कुछ बताते हैं, क्या मुझे पहले स्थापित करने की आवश्यकता है?

Answer 1

आप निम्न में से किसी एक को आजमा सकते हैं। मैंने fetch और axios दोनों का उपयोग किया है, वे आश्चर्यजनक रूप से अच्छी तरह से काम करते हैं। फिर भी superagent आज़माएं।

1. अनुरोध करने के लिए आप लाने-polyfill के साथ fetch उपयोग कर सकते हैं या तो सभी ब्राउज़रों (link)
2. Axios पुस्तकालय में अनुकूलता के लिए। (link)
वादों से
3. Superagent। (link)

आप लाने के बाद से यह अभी तक IE और सफारी में समर्थित नहीं है आप polyfill का उपयोग करने की आवश्यकता होगी का उपयोग करते हैं। लेकिन पॉलीफिल के साथ यह बहुत अच्छी तरह से काम करता है। आप लिंक का उपयोग कर सकते हैं कि आप उनका उपयोग कैसे कर सकते हैं।

तो आप अपने एक्शन निर्माता में क्या कर रहे हैं आप उपर्युक्त में से किसी एक का उपयोग करके एपीआई को कॉल कर सकते हैं।

FETCH

function fetchData(){ 
    const url = '//you url' 
    fetch(url) 
    .then (response) => {//next actions} 
    .catch(error) => {//throw error} 
} 

Axios

axios.get('//url') 
    .then(function (response) { 
    //dispatch action 
    }) 
    .catch(function (error) { 
    // throw error 
    }); 

ताकि API कॉल के लिए किया गया था, अब राज्य के लिए आ रहा है। रेडक्स में एक ऐसा राज्य है जो आपके ऐप को संभालता है। मैं सुझाव दूंगा कि आपको रेडक्स बेसिक्स के माध्यम से जाना चाहिए जिसे आप here पा सकते हैं। तो एक बार आपका एपीआई कॉल सफल हो जाने पर आपको डेटा के साथ अपने राज्य को अपडेट करने की आवश्यकता होती है।

कार्रवाई डेटा प्राप्त करने का

function fetchData(){ 
    return(dispatch,getState) =>{ //using redux-thunk here... do check it out 
     const url = '//you url' 
     fetch(url) 
     .then (response) => {dispatch(receiveData(response.data)} //data being your api response object/array 
     .catch(error) => {//throw error} 
    } 
    } 

कार्रवाई अद्यतन करने के लिए राज्य

function receiveData(data) { 
     return{ 
     type: 'RECEIVE_DATA', 
     data 
    } 
    } 

प्रसारण

function app(state = {},action) { 
     switch(action.types){ 
      case 'RECEIVE_DATA': 
       Object.assign({},...state,{ 
        action.data 
        } 
        }) 
      default: 
      return state 
     } 
    }