redux-thunk

Question

का उपयोग कर पिछली एसिंक कार्रवाई को रद्द करना मैं अजाक्स अनुरोधों को बनाने और संभालने के लिए रेडक्स-थंक मिडलवेयर का उपयोग कर एक प्रतिक्रिया/रेडक्स ऐप बना रहा हूं। मेरे पास एक विशेष थंक है जिसे अक्सर बहुत निकाल दिया जाता है, और मैं किसी नए पहले फायरिंग से पहले किसी भी पहले शुरू किए गए अजाक्स अनुरोधों को रद्द करना चाहता हूं। क्या यह संभव है?

Answer 1

एक दृष्टिकोण उन अनुरोधों को यादृच्छिक आईडी देकर और परिणाम को संभालने से पहले अपनी स्थिति की जांच करके रद्द करना होगा।

ऐसा करने का तरीका अपने पहले प्रेषण (थंक के अंदर) में इस कॉल के लिए यादृच्छिक आईडी असाइन करना है और परिणाम को संभालने से पहले इसे reducer में जांचना है।

const actionId = Math.random(); 
dispatch({type: AJAX_LOAD_CONST, id:actionId }) 

आप रद्द करना चाहते जब अनुरोध के सभी

dispatch({type:HANDLE_AJAX_RESPONSE, id:actionId, results: json })

का उपयोग आप आईडी भेजने के लिए परिणाम को संभालने के लिए मत भूलना चाहते हैं कि आप यू

और में reducer इस तरह कुछ है:

function reducer(state = initialState, action) { 
    switch (action.type) { 
    case actions.AJAX_LOAD_CONST: 
     return Object.assign({}, state, { ajax: state.ajax.concat(action.id) }); 
    case actions.CANCEL_ALL_AJAX: 
     return Object.assign({}, state, { ajax: [] }); 
    case actions.HANDLE_AJAX_RESPONSE: 
     if (state.ajax.includes(action.id) { 
     //return state reduced with action.results here 
     } 
     return state; 
    } 
} 

यदि आप XMLH का उपयोग करते हैं ttpRequest या इसके रैपर (JQuery?) में आप स्वयं अनुरोधों को भी स्टोर कर सकते हैं और request.abort() को कॉल कर सकते हैं। यदि आप नए fetch api का उपयोग करते हैं तो आपके पास यह विलासिता नहीं है क्योंकि वादे इस व्यवहार की कमी करते हैं।

Answer 2

आप अपने एक्शन निर्माता को वादा वापस कर सकते हैं, इसे प्रेषण समारोह द्वारा वापस कर दिया जाएगा, तो इसे रद्द करना संभव होगा। यहाँ एक उदाहरण है:

कार्रवाई निर्माता

function doSomething() { 
    return (dispatch) => { 
    return $.ajax(...).done(...).fail(...); 
    } 
} 

आपका घटक

componentDidMount(){ 
    this.previousPromise = this.props.dispatch(doSomething()); 
    } 

    somefnct() { 
    this.previousPromise.abort(); 
    }