Redux: कई async कॉल की प्रतीक्षा करने के लिए redux मुहावर क्या है?

को निर्मित 14 सित॰ 2015 · 30टिप्पणियाँ · स्रोत: reduxjs/redux

जब मैं प्रतिक्रिया घटक शुरू करता हूं, मुझे 2 अलग-अलग async http कॉल करने और उनके परिणामों की प्रतीक्षा करने की आवश्यकता है।
ये 2 कॉल आदर्श रूप से 2 अलग-अलग रिड्यूसर में अपना डेटा डालेंगे।

मैं एक एकल async कॉल करने के लिए पैटर्न को समझता हूं।
हालाँकि, मुझे एक से अधिक async कॉल करने के लिए कोई अच्छा नमूना नहीं दिख रहा है, उन्हें समानांतर में निष्पादित किया जा रहा है और _both_ के उनके परिणामों के आने की प्रतीक्षा करें।

ऐसा करने का Redux तरीका क्या है?

question

स्रोत

pdeva

👍22 👀3 🚀1 ❤1

सबसे उपयोगी टिप्पणी

मैं मान रहा हूँ कि आप Redux Thunk मिडिलवेयर का उपयोग करें।

कुछ एक्शन रचनाकारों की घोषणा करें:

import 'babel-core/polyfill'; // so I can use Promises
import fetch from 'isomorphic-fetch'; // so I can use fetch()

function doSomething() {
  return dispatch => 
    fetch(
      '/api/something'
    ).then(
      response => response.json()
    ).then(
      json => dispatch({ type: DO_SOMETHING, json }),
      err => dispatch({ type: SOMETHING_FAILED, err })
    );
}

function doSomethingElse() {
  return dispatch => 
    fetch(
      '/api/something'
    ).then(
      response => response.json()
    ).then(
      json => dispatch({ type: DO_SOMETHING_ELSE, json }),
      err => dispatch({ type: SOMETHING_ELSE_FAILED, err })
    );
}

ध्यान दें कि कैसे मैं इसे एक कदम Promise बहुत अंत में चेन एक्शन क्रिएटर के अंदर फ़ंक्शन के रिटर्न मान के रूप में रखकर बनाता हूं। यह मुझे ऐसा करने देता है:

store.dispatch(doSomething()).then(() => {
  console.log('I did something');
});

जब आप Redux Thunk का उपयोग करते हैं, तो dispatch उस फ़ंक्शन का रिटर्न मान देता है जिसे आप thunk एक्शन क्रिएटर से लौटाते हैं - इस मामले में, वादा।

यह आपको कई कार्यों के पूरा होने के लिए Promise.all() जैसे कॉम्बिनेटर का उपयोग करने देता है:

Promise.all([
  store.dispatch(doSomething()),
  store.dispatch(doSomethingElse())
]).then(() => {
  console.log('I did everything!');
});

हालाँकि यह एक अन्य एक्शन क्रिएटर को परिभाषित करने के लिए बेहतर है जो पिछले एक्शन क्रिएटर्स के _composition_ के रूप में कार्य करेगा, और आंतरिक रूप से Promise.all उपयोग करेगा:

function doEverything() {
  return dispatch => Promise.all([
    dispatch(doSomething()),
    dispatch(doSomethingElse())
  ]);
}

अब आप बस लिख सकते हैं

store.dispatch(doEverything()).then(() => {
  console.log('I did everything!');
});

खुश प्रेषण!

gaearon 14 सित॰ 2015

👍319 🎉53 ❤50 😄18 🚀10 👀2

सभी 30 टिप्पणियाँ

मैं मान रहा हूँ कि आप Redux Thunk मिडिलवेयर का उपयोग करें।

कुछ एक्शन रचनाकारों की घोषणा करें:

import 'babel-core/polyfill'; // so I can use Promises
import fetch from 'isomorphic-fetch'; // so I can use fetch()

function doSomething() {
  return dispatch => 
    fetch(
      '/api/something'
    ).then(
      response => response.json()
    ).then(
      json => dispatch({ type: DO_SOMETHING, json }),
      err => dispatch({ type: SOMETHING_FAILED, err })
    );
}

function doSomethingElse() {
  return dispatch => 
    fetch(
      '/api/something'
    ).then(
      response => response.json()
    ).then(
      json => dispatch({ type: DO_SOMETHING_ELSE, json }),
      err => dispatch({ type: SOMETHING_ELSE_FAILED, err })
    );
}

store.dispatch(doSomething()).then(() => {
  console.log('I did something');
});

Promise.all([
  store.dispatch(doSomething()),
  store.dispatch(doSomethingElse())
]).then(() => {
  console.log('I did everything!');
});

function doEverything() {
  return dispatch => Promise.all([
    dispatch(doSomething()),
    dispatch(doSomethingElse())
  ]);
}

अब आप बस लिख सकते हैं

store.dispatch(doEverything()).then(() => {
  console.log('I did everything!');
});

खुश प्रेषण!

gaearon 14 सित॰ 2015

👍319 🎉53 ❤50 😄18 🚀10 👀2

@gaearon कोई विशेष कारण है कि आप thunk promise मिडलवेयर का पक्ष लेते हैं? या सलाह पर कि क्या उपयोग करना है? धन्यवाद।

coodoo 14 सित॰ 2015

कोई विशेष कारण नहीं, मैं इससे बस अधिक परिचित हूं।
दोनों का प्रयास करें और जो आपके लिए सबसे अच्छा है उसका उपयोग करें!

gaearon 14 सित॰ 2015

👍20

समझ गया धन्यवाद!

coodoo 14 सित॰ 2015

JFYI :)
screen shot 2015-09-14 at 11 06 42 am

koresar 14 सित॰ 2015

👍31 😄30 👀1

आप चाहें तो इस पर एक नज़र डाल सकते हैं https://github.com/Cron-J/redux-async-transitions

sureshvarman 23 नव॰ 2015

@ बेयरन क्विक

store.dispatch(doSomething()).then(() => {
  console.log('I did something');
});

- ऐसा लग रहा है कि "मैंने कुछ किया" ब्लॉक तब भी हिट होगा जब doSomething खारिज कर दिया गया - क्योंकि आप doSomething चेन में त्रुटि को दोबारा नहीं पकड़ रहे हैं जब आप इसे पकड़ लेंगे। क्या वह जानबूझकर है? यदि नहीं - और यदि आप इसके बजाय वहां त्रुटि को हटा देंगे - तो क्या आप इसे कॉलर में फिर से संभाल लेंगे?

dylanpyle 13 फ़र॰ 2016

👍1

यह सिर्फ एक उदाहरण है, मेरा मतलब यह निश्चित संदर्भ नहीं है, बस इसे देखने का एक तरीका है। मैंने इसे वास्तविक विचार का एक मिनट नहीं दिया।

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

gaearon 13 फ़र॰ 2016

👍1

अच्छा है धन्यवाद! यह पता चला कि मामला था, लेकिन यह सुनिश्चित करना चाहता था कि कुछ जादू नहीं था जो मैं देख रहा था।

dylanpyle 13 फ़र॰ 2016

👍1

चूंकि Redux अनुकूलन योग्य है, dispatch वापसी का मूल्य अपेक्षित वादा नहीं है।

वास्तव में, मैं वास्तविक जीवन में एक मुद्दे पर भाग गया जब से मैं redux-loop लेता हूं। यह एक लिपटे वादे (https://github.com/raisemarketplace/redux-loop/blob/master/modules/effects.js#L38) को वापस करने के लिए dispatch का ट्विस्ट करता है। इसलिए, हम dispatch वापसी मूल्य पर निर्भर नहीं हो सकते हैं।

mocheng 2 जून 2016

खैर, जैसा कि डैन ने इस धागे में ऊपर कहा: यह _your_ ऐप है, _you_ आपके एक्शन क्रिएटर्स लिख रहे हैं, इसलिए _you_ यह तय करने के लिए मिलते हैं कि वे क्या लौटाते हैं।

markerikson 2 जून 2016

@markerikson dispatch का रिटर्न मान एक्शन क्रिएटर के रिटर्न वैल्यू होने की गारंटी नहीं है, क्योंकि मिडलवेयर इसे ट्विक कर सकता है।

लेकिन, मुझे वर्कअराउंड मिल गया। चेन then dispatch(actonCreator()) बजाय, हम actionCreator() पर चेन कर सकते हैं।

mocheng 2 जून 2016

हां, मिडलवेयर चीजों को ट्विस्ट कर सकता है, लेकिन मेरा कहना यह है कि _y_ आपके अपने ऐप में मिडलवेयर सेट कर रहे हैं :)

markerikson 2 जून 2016

हाय @gaearon , त्वरित (उम्मीद से संबंधित) सवाल! कुछ करने के बारे में आपके विचार क्या हैं

function fetchDataBWhichDependsOnA() {
  return dispatch => {
    dispatch(fetchDataA())
      .then(() => {
        fetch('/api/get/data/B')
          .then(dispatch(receiveDataB(response.data)))
      })
  }
}

इस कोड स्निपेट में 2 नेस्टेड एस्कॉन क्रियाएं हैं, वे काम करते हैं लेकिन मुझे इसका परीक्षण करने में परेशानी हो रही है। मैं fetchDataA() का परीक्षण करने में सक्षम हूं क्योंकि इसमें अतुल्यकालिक कॉल का केवल 1 स्तर है। लेकिन जब मैं fetchDataBWhichDependsOnA() लिए एक परीक्षण लिखने की कोशिश कर रहा था, तो मैं store then ब्लॉक में से सबसे अद्यतन मूल्यों को पुनः प्राप्त नहीं कर सका।

timothytong 30 जून 2016

@timothytong आप वादे वापस नहीं कर रहे हैं। यदि आप dispatch और नेस्टेड fetch कॉल से परिणाम लौटाते हैं, तो आपको अपने परीक्षणों में तब तक प्रतीक्षा करने में सक्षम होना चाहिए जब तक कि पूरी श्रृंखला हल न हो जाए।

johanneslumpe 30 जून 2016

👍2

@johanneslumpe की अच्छी पकड़, धन्यवाद दोस्त! अब यह सब छोड़ दिया गया है, यह सवाल है कि क्या यह स्वीकार्य है या नहीं, एक async लाने के साथ डेटा निर्भरता से निपटने?

timothytong 30 जून 2016

मेरे पास एक ही समस्या थी और 30 मिनट तक एक समाधान के साथ आने की कोशिश कर रहा था। मैंने इसे लागू नहीं किया है, लेकिन मुझे लगता है कि यह सही रास्ते पर है।

https://github.com/Sailias/sync-thunk

मेरा विचार यह है कि एक घटक कुछ रिडक्स स्टेट्स को पॉप्युलेट करने का अनुरोध कर सकता है, यदि वे नहीं हैं तो उन्हें कार्रवाई के लिए कॉल करने के लिए एक मैप का संदर्भ देना चाहिए और उन्हें then साथ चेन करना चाहिए। श्रृंखला में प्रत्येक क्रिया को पास किए गए डेटा की आवश्यकता नहीं होती है, यह केवल राज्य से डेटा ले सकता है क्योंकि आश्रित कार्यों ने इसे आबाद किया होगा।

Sailias 19 जुल॰ 2016

@gaearon

Promise.all([
  store.dispatch(doSomething()),
  store.dispatch(doSomethingElse())
]).then(() => {
  console.log('I did everything!');
});

इस पर मेरा एक सवाल है। माफ करना अगर यह इतना बुनियादी है।

इस परिदृश्य में, दो प्रेषण होंगे। इसका मतलब है कि दो बार घटक का प्रतिपादन किया जाएगा। लेकिन, क्या होगा यदि घटक दोनों डेटा को कुछ सार्थक दिखाना चाहता है?

तो, उस परिदृश्य में, मैं चाहूंगा कि घटक केवल एक बार प्रस्तुत किया जाए और वह तब हो, जब सभी async क्रिया पूरी हो जाएं।

मुझे कुछ बिचौलियों के नाम मिले जो इस मुद्दे को संभालते दिखते हैं जैसे कि redux-batched-subscribe और redux-batched-actions । लेकिन, सबसे अच्छे दृष्टिकोण पर थोड़ा भ्रमित।

यदि यह एक वैध परिदृश्य है, तो इसे संभालने के लिए सुझाया गया तरीका क्या होगा?

jintoppy 31 मार्च 2017

@jintoppy अगर आपका पूछना किसी घटक को रेंडर करने के लिए कई कॉल से बचना है तो Promise.all समाधान आपकी मदद नहीं करेगा; क्योंकि दोनों doSomething() and doSomething() सभी प्रेषण डेटा जो राज्य परिवर्तन को ट्रिगर करते हैं और घटक रेंडर का कारण बनते हैं।

6zz 26 अप्रैल 2017

@jintoppy अपनी स्थिति को संभालने के लिए आपको किसी भी मिडलवार की आवश्यकता क्यों है?
क्या आप की तरह है कि smth करने में बाधा है।

// action creator
function fetchAB() {
  return dispatch => {
    const fetchA = fetch( 'api/endpoint/A' );
    const fetchB = fetch( 'api/endpoint/B' );
    return Promise.all([ fetchA, fetchB ])
      .then( values => dispatch(showABAction(values)) )
      .catch( err => throw err );
  }
}

आप अपने सभी अनुरोधों को केवल एक ही एक्शन क्रिएटर में डाल सकते हैं और उन सभी को हल करने के बाद ही एक्शन के प्रेषण भेज सकते हैं। उस स्थिति में आपके पास reducer कहा जाता है और इस प्रकार राज्य केवल एक बार बदल जाता है, इसलिए रेंडर () की संभावना केवल एक बार भी निकाल दी जाएगी।

apranovich 2 मई 2017

👍13 🎉2

@apranovich : मैं इस दृष्टिकोण के साथ एक समस्या देखता हूं। अब, मुझे एक एक्शन में कई सारे भ्रूण को मिलाने की जरूरत है। इसलिए, यदि मेरे पास है, तो 10 async कॉल करें, मुझे उन सभी को एक ही कार्रवाई में रखना होगा। इसके अलावा, क्या होगा अगर मैं बाद में इन 10 में से एक को कॉल करना चाहता हूं? इस दृष्टिकोण में, मूल रूप से, आपके सभी async तर्क एक क्रिया में निहित होंगे।

jintoppy 3 मई 2017

उपयोगी जानकारी के लिए आप सभी का धन्यवाद। त्वरित प्रश्न, उसी को कैसे प्राप्त किया जा सकता है लेकिन इसके बजाय जब एक भ्रूण डेटा लौटाता है जो अगले लाने की विधि द्वारा आवश्यक होता है। उदाहरण के लिए, एक मुफ्त मौसम एपीआई एंडपॉइंट है जहां मैं एक आईडी (पहला fetch ) प्राप्त करने के लिए जियोलोकेशन इनपुट करता हूं जो स्थान के मौसम को प्राप्त करने के लिए अगले fetch लिए आवश्यक है। मुझे पता है कि यह एक अजीब उपयोग मामला है, लेकिन मैं जानना चाहूंगा कि इसी तरह की स्थितियों को कैसे संभालना है। अग्रिम में धन्यवाद!

JorgeCeja 10 सित॰ 2017

हाय @gaearon , मैं अपने इस सवाल पर आपकी समीक्षा प्राप्त करना चाहूंगा। मुझे दो एपीआई के लिए नेस्टेड एस्क्स्ट कॉल करना है। दूसरी एपीआई की प्रतिक्रिया पहले वाले की प्रतिक्रिया पर निर्भर है।

export const getApi=()=>{
        return(d)=>{
        axios({
            method:'GET',
            url:Constants.URLConst+"/UserProfile",
            headers:Constants.headers
        }).then((response)=>{
            return d({
                type:GET_API_DATA,
                response,
                axios({
                    method:'GET',
                    url:Constants.URLConst+"/UserProfileImage?enterpriseId="+response.data.ProfileData.EnterpriseId,
                    headers:Constants.headers
                }).then((response1)=>{
                    return d({
                        type:GET_PROFILE_IMAGE,
                        response1
                    })
                })
            })
        }).catch((e)=>{
            console.log("e",e);
        })
    }

}

मैंने ऊपर जैसा कुछ करने की कोशिश की, लेकिन यह काम नहीं करता है। और मेरी परियोजना में, मुझे स्वतंत्र रूप से दोनों एपीआई से प्रतिक्रिया का उपयोग करना होगा।
तो, इसे करने का सही तरीका क्या है?

धन्यवाद।

aayushis12 3 अक्तू॰ 2017

@ c0b41 , कृपया अद्यतन प्रश्न की जाँच करें।

aayushis12 3 अक्तू॰ 2017

हे @ c0b41 , यह दूसरी अक्षीय कॉल में वाक्यविन्यास त्रुटियां दे रहा है।

aayushis12 3 अक्तू॰ 2017

👎3

@ aayushis12 , @ c0b41 : यह एक बग ट्रैकर है, न कि सहायता फोरम। आपको स्टैक ओवरफ्लो या रिएक्टिफ्लक्स पर यह सवाल पूछने की कोशिश करनी चाहिए। ऐसे और लोग होंगे जो सवाल देखेंगे और मदद करने में सक्षम होंगे।

markerikson 3 अक्तू॰ 2017

👍2

अनुभव करने वालों के लिए

मैंने सब कुछ किया

सभी async कॉल हल होने से पहले मुद्रित किया जाता है, जांचें कि क्या आप एक बयान या अपने async एक्शन रचनाकारों से एक अभिव्यक्ति लौटा रहे हैं।

उदाहरण के लिए, यदि तीर फ़ंक्शन में doSomethingElse() {} के साथ घोषित किए जाते हैं

function doSomethingElse() {
  return dispatch => {
    fetch(
      '/api/something'
    ).then(
      response => response.json()
    ).then(
      json => dispatch({ type: DO_SOMETHING_ELSE, json }),
      err => dispatch({ type: SOMETHING_ELSE_FAILED, err })
    );
  }
}

"मैंने सब कुछ किया" doSomethingElse() हल होने से पहले प्रिंट होगा। => बाद {} ड्रॉप करके इसे हल करें।

HSpens 14 अग॰ 2018

@gaearon एक प्रश्न, https://github.com/reduxjs/redux/issues/723#issuecomment -139927639 पर आधारित है, यदि आप एक क्रिया को भेजने की आवश्यकता है, जो दो क्रियाओं के लिए प्रतीक्षा करता है, तो आपको इसे कैसे संभालना होगा _AND_ राज्य उन कार्यों के कारण बदल गया है? मैं एक ऐसा मामला रख रहा हूं जिसमें कार्रवाइयों को भेजा गया है लेकिन then अंदर की कार्रवाई को निष्पादित किया गया है _before_ राज्य बदल गया है। हम redux-thunk का उपयोग कर रहे हैं।

enmanuelduran 14 अग॰ 2018

@enmanuelduran : Dan कोई सक्रिय अनुरक्षक नहीं है - कृपया उसे पिंग न करें।

कोड देखे बिना आपके प्रश्न का उत्तर देना कठिन है, लेकिन हमारे मुद्दे वास्तव में चर्चा मंच बनने के लिए नहीं हैं। बेहतर होगा कि आप अपने सवाल को स्टैक ओवरफ्लो पर पोस्ट करें - आपको वहां बेहतर उत्तर मिलने की संभावना है, तेजी से।

markerikson 14 अग॰ 2018

@markersonson ओह, क्षमा करें, यह मेरा उद्देश्य नहीं था, अगर किसी को दिलचस्पी हो तो https://stackoverflow.com/questions/51846612/dispatch-an-action-after-other-pecific-actions-were- भेजा और राज्य के परिवर्तन

बहुत बहुत धन्यवाद दोस्तों।

enmanuelduran 14 अग॰ 2018

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Redux: कई async कॉल की प्रतीक्षा करने के लिए redux मुहावर क्या है?

सबसे उपयोगी टिप्पणी

सभी 30 टिप्पणियाँ

संबंधित मुद्दों