रेडक्स-अवलोकन योग्य - एक एकल महाकाव्य

Question

में एकाधिक रेडक्स क्रियाएं प्रेषित करें मैं redux-observable मिडलवेयर के एक एपिक में एकाधिक रेडक्स क्रियाओं को प्रेषित करने का तरीका ढूंढ रहा हूं।

मान लीजिए कि मेरे पास एपिक का पालन है। हर बार जब SEARCH घटना होती है, एपिक बैकएंड से डेटा लोड करता है और RESULTS_LOADED क्रिया को प्रेषित करता है।

searchEpic = (action$) => 
    action$ 
    .ofType('SEARCH') 
    .mergeMap(
     Observable 
     .fromPromise(searchPromise) 
     .map((data) => { 
      return { 
       type: 'RESULTS_LOADED', 
       results: data 
      } 
     }) 
    ) 

अब, चलो मान लेते हैं कि मैं प्रेषण अतिरिक्त कार्रवाई की जरूरत है जब searchPromise हल हो गई है करते हैं।

ऐसा करने का सबसे आसान तरीका एक दूसरा महाकाव्य है जो RESULTS_LOADED सुनता है और दूसरी क्रिया को प्रेषित करता है। इस तरह:

resultsLoadedEpic = (action$) => 
    action$ 
    .ofType('RESULTS_LOADED') 
    .map(({results} => { 
     return { 
      type: 'MY_OTHER_ACTION', 
      results 
     } 
    }) 

इस सरल उदाहरण में यह काफी आसान है। लेकिन जब महाकाव्य बढ़ते हैं, तो मुझे लगता है कि मुझे बहुत सारे रेडक्स क्रियाएं मिलती हैं जो एकमात्र उद्देश्य अन्य कार्यों को ट्रिगर करना है। इसके अतिरिक्त, कुछ आरएक्सजे कोड को दोहराया जाना चाहिए। मुझे यह थोड़ा बदसूरत लगता है।

तो, मेरा प्रश्न: क्या एक महाकाव्य में एकाधिक रेडक्स कार्यों को प्रेषित करने का कोई तरीका है?

Answer 1

कोई आवश्यकता नहीं है कि आप एक-से-एक इन/आउट अनुपात बनाते हैं। तो तुम अगर आप की जरूरत है mergeMap (उर्फ flatMap) का उपयोग कर कई कार्यों का उत्सर्जन कर सकते हैं:

const loaded = (results) => ({type: 'RESULTS_LOADED', results}); 
const otherAction = (results) => ({type: 'MY_OTHER_ACTION', results}); 

searchEpic = (action$) => 
    action$ 
    .ofType('SEARCH') 
    .mergeMap(
     Observable 
     .fromPromise(searchPromise) 
     // Flattens this into two events on every search 
     .mergeMap((data) => Observable.of(
      loaded(data), 
      otherAction(data)) 
     )) 
    ) 

ध्यान दें कि किसी भी आरएक्स ऑपरेटर है कि एक वादा, सारणी या Iterable स्वीकार कर सकते हैं एक नमूदार भी स्वीकार करता है; उन्हें खा रहे थे-अगर वे धाराएं थे। तो हम एक ही प्रभाव के लिए एक सरणी का उपयोग कर सकते हैं:

.mergeMap((data) => [loaded(data), otherAction(data)]) 

जो भी आप उपयोग करते हैं वह आपकी व्यक्तिगत शैली वरीयताओं और केस का उपयोग करता है।