Redux

Question

के साथ गूंगा घटकों से एपीआई कॉल करें मैं प्रतिक्रिया और रेडक्स के साथ ड्रॉपडाउन को कार्यान्वित करना चाहता हूं। ड्रॉपडाउन अन्य घटक का हिस्सा होगा, इसलिए, यह वास्तव में "गूंगा" घटक है। लेकिन ड्रॉपडाउन को वस्तुओं को लाने, कस्टम फ़िल्टर आदि लागू करने के लिए एपीआई को कॉल करना चाहिए। एपीआई कॉल को प्रमाणीकृत किया जाना चाहिए, टोकन ने इसे वैश्विक स्थिति में संग्रहित किया जाना चाहिए। क्या मुझे घटक प्रोप में टोकन पास करना चाहिए? या ऐसा करने का एक बेहतर तरीका है?

Answer 1

परिभाषा के अनुसार एक गूंगा घटक गूंगा होना चाहिए: इसका मतलब है कि इसे "शीर्ष से", यानी प्रोप के माध्यम से आवश्यक सब कुछ लेना चाहिए।

केवल "स्मार्ट" (रेडक्स के लिए "कनेक्ट" घटक, पदानुक्रम ऊपर, एक नई (एसिंक) एक्शन का उपयोग करके डेटा लाने के साथ सौदा करेगा, जो तब एपीआई कॉल रिटर्न के दौरान राज्य को संशोधित करेगा, जो होगा अपने नए प्रोप के साथ अपने गूंगा घटक को फिर से प्रस्तुत करें।

Redux में

तो: मान लें कि आपके API से आ रही (जो वास्तव में अपने "राज्य" का हिस्सा हैं) के साथ एक, एक दूसरे को एक समारोह है कि जब कहा जाता है:

• आपका बेवकूफ घटक दो सहारा लेता है आपके ड्रॉपडाउन चयनित आइटम परिवर्तन। <MyDumbComponent data={this.props.data} onChange={this.onChange.bind(this)} />
• फिर एक "स्मार्ट" घटक ऊपर पदानुक्रम कि onChange समारोह को सुनने जाएगा, और एक क्रिया (FETCH_DATA)
• (async) कार्रवाई API कॉल करेंगे प्रेषण, और जब डेटा प्राप्त करने, एक और कार्रवाई फोन (FETCH_DATA_SUCCESS) डेटा के साथ
• फिर Redux, एक कम करने के साथ, अपने राज्य कार्रवाई पेलोड
• कौन होगा अपनी नई रंगमंच की सामग्री (नए डेटा के साथ अपने घटक फिर से प्रस्तुत करना) से अपडेट करेंगे, वर्तमान स्थिति से आ रही।

आप इस पढ़ने के लिए चाहते हो सकता है: http://redux.js.org/docs/basics/UsageWithReact.html

और के बारे में async कार्रवाई: http://redux.js.org/docs/advanced/AsyncActions.html

Answer 2

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

परिदृश्य के प्रकार के लिए आप वर्णन कर रहे हैं, तो आप <Menu> प्रोप के माध्यम से एक फ़ंक्शन देंगे जो <Menu> डेटा अपडेट करना चाहता है। <Menu> रेडक्स के बारे में कुछ नहीं जानता - यह सिर्फ एक फ़ंक्शन निष्पादित कर रहा है - लेकिन यह अभी भी नया डेटा लाने में सक्षम है। जटिलताओं के आधार पर, आप कच्चे एक्शन निर्माता (प्रेषण के लिए बाध्य) से गुज़र सकते हैं और इसे चला सकते हैं।

import * as dataActions from './actions'; 
// We have dataActions.fetchItems() which is the action creater to get new items. 

// Attach items, and the action creator (bound to dispatch) to props 
@connect((store) => { 
    return {items: store.data.items} 
}, dataActions) 
class ItemsPage extends Component { 
    static propTypes = { 
     items: PropTypes.object, // the items from the store, from @connect 
     fetchItems: PropTypes.func // action dispatcher, from @connect 
    } 

    render() { 
     return (<Menu onChange={this.props.fetchItems} />) 
    } 
} 

// Our 'dumb' component that doesnt know anything about Redux, 
// but is still able to update data (via its smart parent) 
class Menu extends Component { 
    static propTypes = { 
     onChange: PropTypes.func // same as fetchItems 
    } 

    render() { 
     return (<button onClick={this.props.onChange}>Update items</button>); 
    } 
}