रेडक्स के साथ प्रतिक्रिया घटकों के बीच यूआई राज्य परिवर्तनों को कैसे संवाद करें?

Question

जहां तक ​​मुझे रेडक्स समझा जाता है, यह एक स्टोर में यूआई की सभी स्थिति को रखने के बारे में है (कुछ राज्यों को आसानी से पुन: पेश करने में सक्षम होने के लिए और कोई दुष्प्रभाव नहीं है)। आप रेड्यूसर को ट्रिगर करने वाले कार्यों को ट्रिगर करने के माध्यम से राज्य में हेरफेर कर सकते हैं।

मैं वर्तमान में एक छोटा ब्लॉग-एप ऐप लिख रहा हूं जहां आप आसानी से पोस्ट बना सकते हैं और संपादित कर सकते हैं। संवाद के राज्य (खोला या बंद) चाहिए राज्य वस्तु का हिस्सा हो:

<div> 
    <AppBar ... /> 
    <PostFormDialog 
     addPost={actions.addPost} 
     ref="postFormDialog" /> 
    <PostList 
     posts={posts} 
     actions={actions} /> 
</div> 

मेरा प्रश्न है: मैं एक पोस्ट बनाने के लिए एक संवाद है, App घटक का लगभग render विधि कुछ इस तरह देता है ऐप घटक का? और इसलिए खोलने और बंद करने संवाद बजाय निम्नलिखित की तरह कुछ करने का एक कार्रवाई के माध्यम से शुरू किया जा चाहिए:

onTriggerCreatePostDialog(e) { 
    this.refs.postFormDialog.show(); 
} 

जहां onTriggerCreatePostDialog कुछ क्लिक श्रोता के माध्यम से शुरू हो रहा है एक "बनाने के" बटन या इतने पर।

ऐसा लगता है कि यह एक क्रिया के माध्यम से ऐसा करने के लिए थोड़ा अजीब लगता है क्योंकि यह "संकेत" की तरह पेश करता है।

हालांकि, यह मानते हुए कि मैं संपादन कार्रवाई के लिए संवाद का पुन: उपयोग करना चाहता हूं, मैं घटक संरचना में गहरे तत्वों से संवाद खोलने में सक्षम होना चाहिए, उदाहरण के लिए Post घटक जो PostList का बच्चा है घटक। क्या मैं कर सकता props संपत्ति के माध्यम से पदानुक्रम नीचे onTriggerCreatePostDialog समारोह पारित है, लेकिन यह मेरे लिए बोझिल लगता है ...

तो पूर्णांक अंत है घटक जो एक सीधा अभिभावक-बच्चे में नहीं हैं के बीच संवाद स्थापित करने के बारे में भी है रिश्ते। क्या अन्य विकल्प हैं? क्या मुझे किसी वैश्विक घटना बस का उपयोग करना चाहिए? मैं वर्तमान में बिल्कुल अनिश्चित हूँ।

Answer 1

संवाद के लिए राज्य रेडक्स स्टोर में होना चाहिए, जो कार्यों से ट्रिगर होता है। चाहे इसे प्रस्तुत किया जाना चाहिए, उस राज्य को रेडक्स स्टोर में जांचकर निर्धारित किया जाना चाहिए। ऐसा करने के लिए सही तरीका

render() { 
    const { showDialog } = this.props; 

    return (
    <div> 
     <AppBar ... /> 
     { showDialog ? <PostFormDialog ... /> : false } 
     <PostList ... /> 
    </div> 
); 
} 

जहां mapStateToProps किया जाएगा state => {{ showDialog: state.showDialog }}

की तरह कुछ कार्रवाई निर्माता पहुंचाने, इसे नीचे गुजर रंगमंच की सामग्री के पेड़ के संदर्भ में शायद है:

App.render() कुछ इस तरह होना चाहिए जब तक कि आपके पास कुछ अच्छा स्थान न हो, जहां तक ​​यह एक और स्मार्ट घटक होने का अर्थ हो।

Answer 2

ऐसा लगता है कि आप सही रास्ते पर हैं। दस्तावेज़ पहले थोड़ा मुश्किल हो सकते हैं, लेकिन मैं आपको बता सकता हूं कि मेरी टीम और मैं कार्यान्वयन का उपयोग कैसे कर रहा हूं।

अपने पहले प्रश्न को संबोधित करने के लिए; यदि राज्य किसी घटक के लिए विशिष्ट है तो हम उस स्थिति को घटक के साथ रखते हैं। इसका एक उदाहरण एक पैनल होगा जो पृष्ठों को स्थानीय रूप से रिकॉर्ड करता है --- किसी और चीज को उस व्यवहार से अवगत होने की आवश्यकता नहीं है। इसलिए इस उदाहरण में जब पृष्ठ बदल गया तो हम एक रेडक्स एक्शन ट्रिगर नहीं करेंगे, जिसे रेफरी का उपयोग करके घटक संरचना में आंतरिक रूप से संभाला जाएगा।

हमारे रेडक्स राज्य में मुख्य रूप से एक्सएचआर अनुरोधों या साझा राज्य से एकत्रित डेटा शामिल है। साझा राज्य का एक उदाहरण कई घटकों के बीच एक समय सीमा का प्रबंधन करेगा जो डेटा प्रदर्शित करने के लिए उस सीमा का उपयोग करते हैं।इस उदाहरण में हम एक Redux कार्रवाई ट्रिगर करेंगे; दिनांक स्थिति को जो कुछ भी बदला गया था उसे अद्यतन करें (जबकि कुछ अन्य राज्य वस्तुओं को xhr के माध्यम से अपडेट करना) और फिर आखिरकार घटकों पर वापस आ जाता है और वे फिर से प्रस्तुत करते हैं।

इसके साथ ही, रेफरी के माध्यम से कार्यों को ट्रिगर करना पूरी तरह से स्वीकार्य है, यह केवल विशिष्ट उपयोग केस के बारे में है।

अपने दूसरे प्रश्न को संबोधित करने के लिए; रेडक्स Smart & Dumb घटक अवधारणा का उपयोग करने की सिफारिश करता है। तो आप सही हैं कि आप गूंगा घटकों के उपयोग के लिए पेड़ के नीचे एक समारोह पारित करेंगे।

हम अपने connect सेटअप में mapDispatchToProps का उपयोग करते हैं। तो मूल रूप से आप एक फ़ंक्शन पास करते हैं जो फ़ंक्शन "प्रेषक" की ऑब्जेक्ट देता है। आप सीधे अपने स्मार्ट घटक के this.props में उन कार्यों तक पहुंच पाएंगे। mapDispatchToProps

function mapDispatchToProps(dispatch) { 
    return { 
    myAction:() => dispatch(actions.myAction()), 
    }; 
} 

तो उस समय के 99% काम करता है, लेकिन मैं कुछ कोने मामलों में जहां हम एक वैश्विक घटना बस का उपयोग कर आई है, इसलिए दोनों का उपयोग करने में संकोच न करें की

उदाहरण जितना संभव हो सके स्मार्ट/गूंगा घटक विधि से चिपकने का प्रयास करते समय।

एक साइड नोट के रूप में, मैं आपके रेडक्स स्थिति को स्मार्ट घटक में मैप करने के लिए reselect का उपयोग करने की सलाह दूंगा। आप अन्य महान रेडक्स संसाधन भी देख सकते हैं here (कई चीजें सूचीबद्ध हैं जिन्हें हम उपयोग करते हैं)।