एक अन्य कार्रवाई

Question

मैं एक async कार्रवाई है, जो बाकी एपीआई से डेटा लाने राशि के बाद Redux प्रेषण कार्रवाई प्रतिक्रिया top = 10, skip = 0 के लिए प्रारंभिक स्थिति। घटक में:

class List extends Component { 
    componentDidMount() {   
     this.list(); 
    } 

    nextPage() { 
     let top = this.props.list.top; 
     let skip = this.props.list.skip; 

     // After this 
     this.props.onSetSkip(skip + top); 

     // Here skip has previous value of 0. 
     this.list(); 
     // Here skip has new value of 10. 
    } 

    list() { 
     this.props.List(this.props.list.top, this.props.list.skip); 
    } 

    render() { 
     return (
      <div> 
       <table> ... </table> 
       <button onClick={this.nextPage.bind(this)}>Next</button> 
      </div> 
     ); 
    } 
} 

जब बटन अगला पहली बार में क्लिक किया है, जो async कार्रवाई का उपयोग करता skip का मूल्य नहीं बदला। सिंक कार्रवाई के बाद कार्रवाई को कैसे प्रेषित किया जा सकता है?

Answer 1

उत्तर के लिए धन्यवाद, लेकिन मैं इसे इस तरह बनाया:

let top = this.props.list.top; 
let skip = this.props.list.skip; 
let newSkip = skip + top; 

this.props.onList(top, newSkip); 
this.props.onSetSkip(newSkip); 

सबसे पहले मैं नया skip की गणना करने और इस नए मूल्य के साथ एक async कार्रवाई प्रेषण। फिर मैं एक syns कार्रवाई भेजता हूं, जो राज्य में skip अद्यतन करता है।

Answer 2

सिंक एक्शन के बाद कोई कार्रवाई भेजने के बजाय, क्या आप फ़ंक्शन को रेड्यूसर से कॉल कर सकते हैं?

तो यह इस प्रवाह इस प्रकार है:

सिंक कार्रवाई कॉल -> प्रसारण कॉल ---> मामले समारोह (कम करने) ---> मामले समारोह (कम करने)

के बजाय सामान्य प्रवाह जो शायद यह आपके लिए है:

सिंक कार्रवाई कॉल -> प्रसारण कॉल

यह देखने के लिए कि क्या केस रेड्यूसर हैं, split the reducers up पर इस मार्गदर्शिका का पालन करें।

यदि आप जिस क्रिया को प्रेषित करना चाहते हैं, वह पक्ष को प्रभावित करता है, फिर भी सही तरीके से Thunks का उपयोग करना है और फिर आप कार्रवाई के बाद एक क्रिया भेज सकते हैं।

Thunks के लिए

उदाहरण:

export const setSkip = (skip) => { 
    return (dispatch, getState) => { 

     dispatch(someFunc()); 
     //Do someFunc first then this action, use getState() for currentState if you want 
     return { 
      type: 'LIST.SET_SKIP', 
      skip: skip 
     }; 
    } 
}; 

Answer 3

प्रेषण ({प्रकार: 'LIST.SUCCESS', डेटा: डेटा, छोड़ें: सिंक कार्रवाई के बाद मूल्य आप चाहते हैं});

Answer 4

भी आप redux thunk उपयोग कर रहे हैं यह पता redux-sequence-action

Answer 5

जाँच, आप आसानी से उन्हें जोड़ सकते हैं। यह एक मिडलवेयर है जो एक्शन क्रिएटर को किसी क्रिया के बजाए फ़ंक्शन लौटा देता है।

यदि आपके पास एक्शन क्रिएटर को चेन करने की आवश्यकता नहीं है और केवल उन दोनों को चलाने की आवश्यकता है तो आपके समाधान ने आपके लिए काम किया होगा।

this.props.onList(top, newSkip); 
this.props.onSetSkip(newSkip); 

आप (उन्हें एक तुल्यकालिक ढंग से कह कर बुलाया) या पहली कार्रवाई के डेटा भेजा से इंतजार कर चेनिंग की जरूरत है, यह मैं क्या सलाह देते हैं है।

export function onList(data) { 
    return (dispatch) => { 
      dispatch(ONLIST_REQUEST()); 
    return (AsyncAPICall) 
    .then((response) => { 
     dispatch(ONLIST_SUCCESS(response.data)); 
    }) 
    .catch((err) => { 
     console.log(err); 
    }); 
    }; 
} 

export function setSkip(data) { 
     return (dispatch) => { 
       dispatch(SETSKIP_REQUEST()); 
     return (AsyncAPICall(data)) 
     .then((response) => { 
      dispatch(SETSKIP_SUCCESS(response.data)); 
     }) 
     .catch((err) => { 
      console.log(err); 
     }); 
     }; 
    } 

export function onListAndSetSkip(dataForOnList) { 
    return (dispatch) => { 
    dispatch(onList(dataForOnList)).then((dataAfterOnList) => { 
     dispatch(setSkip(dataAfterOnList)); 
    }); 
    }; 
}