Redux-saga

Question

के साथ async प्रतिक्रिया-चयन का उपयोग करें I async प्रतिक्रिया-चयन (Select.Async) को लागू करने का प्रयास करें। समस्या यह है कि हम रेडक्स-सागा में लाने के लिए चाहते हैं। तो यदि कोई उपयोगकर्ता कुछ टाइप करता है, तो फ़ेच-एक्शन ट्रिगर किया जाना चाहिए। सागा फिर रिकॉर्ड लाती है और उन्हें स्टोर में सहेजा जाता है। यह अब तक काम करता है। दुर्भाग्य से लोडऑप्शन को एक वादा वापस करना होगा या कॉलबैक को कॉल किया जाना चाहिए। चूंकि नए पुनर्प्राप्त विकल्पों को एक बदलती संपत्ति के साथ प्रचारित किया जाता है, इसलिए मुझे का चयन करने का कोई तरीका नहीं दिखता है। एसिंक साथ ही एसाइन फ़ेच कॉल करने के लिए गाथा के साथ। कोई सुझाव?

<Select.Async 
    multi={false} 
    value={this.props.value} 
    onChange={this.onChange} 
    loadOptions={(searchTerm) => this.props.options.load(searchTerm)} 
    /> 

मैं एक हैक जहां मैं एक वर्ग चर को कॉलबैक सौंपा और componentWillReceiveProps पर इसे सुलझाने के लिए किया था। इस तरह बदसूरत और ठीक से काम नहीं किया, इसलिए मैं एक बेहतर समाधान की तलाश में हूं।

धन्यवाद

Answer 1

redux-saga एसिंक्रोनस रूप react-select के लिए विकल्प प्राप्त करने की तरह से निपटने के साइड इफेक्ट के लिए है। यही कारण है कि आपको एसिंक सामग्री redux-saga पर छोड़नी चाहिए। मैंने कभी भी react-select का उपयोग नहीं किया है, लेकिन दस्तावेज़ीकरण को देखकर मैं इसे इस तरह हल कर दूंगा:

आपका घटक बहुत आसान हो जाता है। अपने रेडक्स स्टोर से बस value और options प्राप्त करें। optionsRequestedOPTIONS_REQUESTED कार्रवाई के लिए एक कार्य निर्माता है: OPTIONS_REQUESTED कार्रवाई कि onInputChange द्वारा trigged है के लिए

const ConnectedSelect = ({ value, options, optionsRequested }) => (
    <Select 
    value={value} 
    options={options} 
    onInputChange={optionsRequested} 
    /> 
) 

export default connect(store => ({ 
    value: selectors.getValue(store), 
    options: selectors.getOptions(store), 
}), { 
    optionsRequested: actions.optionsRequested, 
})(ConnectedSelect) 

एक गाथा परिभाषा घड़ियां, सर्वर से दिए गए searchTerm साथ डेटा लोड करता है और redux दुकान अद्यतन करने के लिए OPTIONS_RECEIVED कार्रवाई डिस्पैचिज।

function* watchLoadOptions(searchTerm) { 
    const options = yield call(api.getOptions, searchTerm) 
    yield put(optionsReceived(options)) 
} 

दूसरे शब्दों में: अपने घटक के रूप में शुद्ध करें और redux-saga

मुझे आशा है कि इस सवाल का जवाब आप के लिए उपयोगी था में सभी पक्ष प्रभाव/async कॉल संभाल।