वापसी वादा के बाद redux thunk प्रेषण

Question

// स्पष्टता

मैं redux साथ श्रृंखला डिस्पैच करने के लिए कोशिश कर रहा हूँ के लिए संपादित thunk

function simple_action(){ 
    return {type: "SIMPLE_ACTION"} 
} 

export function async_action(){ 
    return function(dispatch, getState){ 
    return dispatch(simple_action).then(()=>{...}); 
    } 
} 

मैं दुकान से एक वादा वापस जाने के लिए प्रेषण कैसे मिलता है?

// अधिक विशेष रूप से

मैं कर रहा हूँ शायद सिर्फ यहाँ कुछ समझ नहीं है, लेकिन thunk-redux के साथ सभी उदाहरणों में, वे एक अलग async घटना फोन (जैसे लाने) है, जो स्पष्ट रूप से एक वादा देता है। जो मैं विशेष रूप से ढूंढ रहा हूं वह यह है कि जब मैं स्टोर में कोई कार्रवाई भेजता हूं, तो मैं यह सुनिश्चित कैसे कर सकता हूं कि स्टोर ने कार्रवाई कार्रवाई_creator() में किसी और चीज से पहले पूरी तरह से कार्रवाई को संसाधित किया है।

आदर्श रूप में, मैं स्टोर को किसी तरह का वादा वापस करना चाहता हूं, लेकिन मुझे नहीं पता कि यह कैसे या कहाँ होता है?

Answer 1

यहां आपके पास एक उदाहरण है कि प्रेषण और श्रृंखला एसिंक कार्रवाई कैसे करें। https://github.com/gaearon/redux-thunk

thunk मिडलवेयर जानता है कि कैसे कार्रवाई में thunk async कार्रवाई चालू करने के लिए है, तो आप सिर्फ एक thunk और thunk मिडलवेयर आप के लिए काम करेगा होना करने के लिए अपने simple_action() करना होगा, अगर मिडलवेयर एक सामान्य कार्रवाई को देखने के , वह इस क्रिया को सामान्य कार्रवाई के रूप में प्रेषित करेगा लेकिन यदि यह एक एसिंक फ़ंक्शन है तो यह आपकी एसिंक कार्रवाई को सामान्य क्रिया में बदल देगा।

तो अपने simple_action एक thunk (। एक thunk एक समारोह एक फ़ंक्शन है) इस तरह के उदाहरण के लिए करने की आवश्यकता है:

function makeASandwichWithSecretSauce(forPerson) { 
    return function (dispatch) { 
    return fetchSecretSauce().then(
     sauce => dispatch(makeASandwich(forPerson, sauce)), 
     error => dispatch(apologize('The Sandwich Shop', forPerson, error)) 
    ); 
    }; 
} 

makeASandwichWithSecretSauce समारोह आप प्रेषण समारोह

उपयोग कर सकते हैं का उपयोग करते समय

store.dispatch(
    makeASandwichWithSecretSauce('Me') 
); 

और यहां तक ​​कि

// It even takes care to return the thunk’s return value 
// from the dispatch, so I can chain Promises as long as I return them. 

store.dispatch(
    makeASandwichWithSecretSauce('My wife') 
).then(() => { 
    console.log('Done!'); 
}); 

यहाँ पर कैसे पूर्ण उदाहरण आप एक्शन क्रिएटर लिख सकते हैं जो अन्य एक्शन क्रिएटर से एक्शन और एसिंक एक्शन भेजते हैं, और वादे के साथ अपना नियंत्रण प्रवाह बनाते हैं।

function makeSandwichesForEverybody() { 
    return function (dispatch, getState) { 
    if (!getState().sandwiches.isShopOpen) { 
     // You don’t have to return Promises, but it’s a handy convention 
     // so the caller can always call .then() on async dispatch result. 
     return Promise.resolve(); 
    } 

    //Do this action before starting the next one below 
    dispatch(simple_action()); 

    // We can dispatch both plain object actions and other thunks, 
    // which lets us compose the asynchronous actions in a single flow. 
    return dispatch(
     makeASandwichWithSecretSauce('My Grandma') 
    ).then(() => 
     Promise.all([ 
     dispatch(makeASandwichWithSecretSauce('Me')), 
     dispatch(makeASandwichWithSecretSauce('My wife')) 
     ]) 
    ).then(() => 
     dispatch(makeASandwichWithSecretSauce('Our kids')) 
    ).then(() => 
     dispatch(getState().myMoney > 42 ? 
     withdrawMoney(42) : 
     apologize('Me', 'The Sandwich Shop') 
    ) 
    ); 
    }; 
} 
//apologize and withdrawMoney are simple action like this for example 
     return { 
     type: "END_SUCESS" 
     } 

// उपयोग

store.dispatch(
    makeSandwichesForEverybody() 
).then(() => 
    console.log("Done !"); 
); 

बनाने के लिए आप ही वादों आप Bluebird की तरह एक पुस्तकालय का उपयोग कर सकते हैं।

// संपादित करें: यह सुनिश्चित करने के लिए कि फ़ंक्शन action_creator() में किसी और चीज से पहले पूरी तरह से उस क्रिया को संसाधित कर लेता है, आप action_creator() से पहले इस simple_action को प्रेषित कर सकते हैं; // मैंने इस टिप्पणी को कोड //Do this action before starting the next one below

Answer 2

dispatch जो भी कार्यवाही/रिटर्न कॉल करता है उसे वापस कर देगा; इसलिए यदि आप कुछ गतिविधियों को श्रृंखलाबद्ध करना चाहते हैं (आपके उदाहरण के अनुसार), तो आपकी कार्रवाई को Promise वापस करने की आवश्यकता होगी।

जैसा कि @ एलेक्स का उल्लेख है, यदि आपकी कार्रवाई thunk थी तो आप एक परिदृश्य बना सकते हैं जहां आप Promise लौटाते हैं, तो आप उल्लेख कर सकते हैं।

BTW मैं नामकरण लगता है कि आपके thunk रूप simple_action वास्तव में एक कार्रवाई प्रजापति Redux में भाषा है action_creator, थोड़ा भ्रामक है - तदनुसार संपादित किया है :)