म्यूज़ोमैटिक रेडक्स अवलोकन योग्य

Question

का उपयोग करके घटनाओं को कतार और रद्द करें डाउनलोड प्रबंधक के उदाहरण को देखते हुए। सक्रिय डाउनलोड की कोई संख्या हो सकती है।

कार्यों को शुरू करने, रोकने, चिह्नित करने और किसी भी विशेष डाउनलोड की डाउनलोड प्रगति को चिह्नित करने के लिए भेजा जा सकता है।

const START_DOWNLOAD = "START_DOWNLOAD"; 
const startDownload = payload => ({ type: START_DOWNLOAD, payload }); 

const DOWNLOAD_PROGRESS = "DOWNLOAD_PROGRESS"; 
const downloadProgress = payload => ({ type: DOWNLOAD_PROGRESS, payload }); 

const STOP_DOWNLOAD = "STOP_DOWNLOAD"; 
const stopDownload = payload => ({ type: STOP_DOWNLOAD, payload }); 

const COMPLETE_DOWNLOAD = "COMPLETE_DOWNLOAD"; 
const completeDownload = payload => ({ type: COMPLETE_DOWNLOAD payload }); 

इन कार्यों एक आईडी शामिल डाउनलोड पहचानने में मदद करेंगे और निम्नलिखित कम करने का उपयोग कर redux राज्य संशोधित कर सकते हैं:

const downloadReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case STOP_DOWNLOAD: 
     return { 
     ...state, 
     [action.payload.id]: { 
      state: "IDLE", 
     }, 
     }; 

    case START_DOWNLOAD: 
     return { 
     ...state, 
     [action.payload.id]: { 
      state: "IN_PROGRESS", 
      progress: 0, 
     }, 
     }; 

    case DOWNLOAD_PROGRESS: 
     return { 
     ...state, 
     [action.payload.id]: { 
      state: "IN_PROGRESS", 
      progress: action.payload.progress, 
     }, 
     }; 

    case COMPLETE_DOWNLOAD: 
     return { 
     ...state, 
     [action.payload.id]: { 
      state: "DONE", 
      progress: 100, 
     }, 
     }; 

    default: 
     return state; 
    } 
}; 

अब कैसे का उपयोग कर इन कार्यों में से async प्रेषण का प्रबंधन करने पर इस मुद्दे की बात आती है रेडक्स देखने योग्य।

उदाहरण के लिए हम कुछ इस तरह कर सकता है:

const downloadEpic = action$ => 
    action$.ofType(START_DOWNLOAD).mergeMap(action => 
    downloader 
    .takeUntil(
     action$.filter(
     stop => 
     stop.type === STOP_DOWNLOAD && 
     stop.payload.id === action.payload.id, 
    ), 
    ) 
    .map(progress => { 
     if (progress === 100) { 
     return completeDownload({ 
      id: action.payload.id 
     }); 
     } else { 
     return downloadProgress({ 
      id: action.payload.id, 
      progress 
     }); 
     } 
    }), 
); 

यह काम करता है। हालांकि, अगर हम सक्रिय डाउनलोड की संख्या को सीमित करना चाहते हैं तो क्या होगा। के साथ हम mergeMap को प्रतिस्थापित कर सकते हैं ताकि केवल एक समय में एक सक्रिय डाउनलोड की अनुमति हो सके। या हम concurrent parameter को mergeMap पर आपूर्ति कर सकते हैं और निर्दिष्ट कर सकते हैं कि आंतरिक डाउनलोडर के कितने निष्पादन देखने योग्य हैं, हम एक बार में अनुमति देना चाहते हैं।

हालांकि, यह समस्या के साथ आता है कि अब हम कतार डाउनलोड बंद नहीं कर सकते हैं।

I have created a complete working example that you can try here.

आप कैसे सीमित कर सकते हैं और कतार डाउनलोड सबसे मुहावरेदार तरीका संभव में rxjs और redux नमूदार का उपयोग कर?

Answer 1

मैं इसे कुछ दिनों के लिए देख रहा हूं लेकिन आपके पास पूर्ण कोड के साथ ठोस जवाब देने का समय नहीं है क्योंकि यह अपेक्षाकृत शामिल है। तो बजाय मैं बस आपको tl दे देंगे, डॉ संस्करण है कि कुछ नहीं से बेहतर है मुझे आशा है कि :)

---

मेरे पेट मुझसे कहता है कि मैं यूआई वह कार्रवाई है जो बजाय डाउनलोड करने के लिए एक प्रयास का प्रतिनिधित्व करता है प्रेषण के लिए होता है सच गारंटी जैसे ATTEMPT_DOWNLOAD। एक महाकाव्य इस क्रिया के लिए सुनेगा और जांच करेगा कि सक्रिय डाउनलोड की वर्तमान संख्या से अधिक है> = अधिकतम और यदि ऐसा है, तो इसे शुरू करने के बजाय डाउनलोड को एन्क्यू करने के लिए एक क्रिया को छोड़ देगा।

आपके रेड्यूसर उन पंक्तियों के उन सक्रिय और डाउनलोड आईडी की डाउनलोड आईडी स्टोर करेंगे। जैसे

{ active: ['123', '456', ...etc], queued: ['789'] } 

जो तुम सक्रिय दोनों ट्रैक रखने के लिए प्रयोग करेंगे/विशेष रूप से, लेकिन यह भी पंक्तिबद्ध उन्हें active.length की गिनती को पता है, queued.length

एक डाउनलोड एक महाकाव्य पूरा करता है कहीं न कहीं किसी भी पंक्तिबद्ध देखते हैं अगर जाँच करेगा जब डाउनलोड और यदि हां, तो एक को हटा दें। वास्तव में आप इसे कैसे करते हैं, यह ज्यादातर व्यक्तिगत वरीयता है। जैसे यदि महाकाव्य DEQUEUE_DOWNLOAD या जो कुछ भी निकलता है।

यदि रद्दीकरण कार्रवाई भेजी जाती है तो आपके रेड्यूसर को active और queued दोनों में देखना होगा और यदि वहां मौजूद है तो आईडी को हटा दें। यदि यह वास्तव में सक्रिय था और केवल कतारबद्ध नहीं था तो डाउनलोड को संभालने वाला महाकाव्य रद्दीकरण कार्रवाई के लिए सुन रहा होगा और यह इसे रोक देगा और उपरोक्त के समान डेक्यू चेक करेगा।

---

इसमें कुछ समय हाथ से लहरदार है, लेकिन बड़ा टेकअवे ये हैं:

• आपका UI घटक, इससे पहले कि यह प्रयास करता है पता नहीं कैसे करना चाहिए या जब चीजें पंक्ति में लग जाएँगे हालांकि यह देख सकते हैं इस तथ्य के बाद रेडक्स राज्य (उदाहरण के लिए "डाउनलोड कतारबद्ध" या जो कुछ भी दिखाना है)
• सावधानी बरतें कि कई स्थानों पर डाउनलोड की स्थिति को डुप्लिकेट न करें। जैसे यदि यह सक्रिय है, तो आपके स्टोर में केवल सत्य का एक ही स्रोत है जो कहता है कि यह
• रेड्यूसर के बाद चलने वाली महाकाव्य है, इसे अपने लाभ के लिए उपयोग करें।
• शायद एक महाकाव्य होगा जो सच डाउनलोड अनुरोधों को सुनना और इसे निष्पादित करना है, क्यूईइंग या उस तरह की चीजों के बारे में कुछ भी जानने के बिना। इस महाकाव्य को फिर कई अन्य महाकाव्यों द्वारा पुन: उपयोग किया जाएगा। या तो इसे सीधे एक फ़ंक्शन के रूप में या अपने वास्तविक START_DOWNLOAD

पर एक क्रिया को उत्सर्जित करके यह हमेशा स्पष्ट नहीं होता है कि व्यापार तर्क कहाँ झूठ बोलना चाहिए। जैसे क्या रेड्यूसर केवल अधिकतर गेटर्स/सेटर हो सकते हैं या क्या उन्हें अधिक तर्कसंगत तर्क और निर्णय लेना चाहिए? इन मामलों में बहुत से नियम नहीं हैं। बस सुसंगत होने की कोशिश करें।

बीटीडब्ल्यू यह पूरी तरह से मेरे आंत से है। मैंने पाया होगा (या आपको अभी भी मिल सकता है) कि व्यवहार में यह एक अच्छा समाधान नहीं है। बस मेरे शुरुआती विचार दे रहे हैं!