प्रतिक्रिया-रिडक्स से कनेक्ट () फ़ंक्शन का उपयोग करना

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

जावास्क्रिप्ट अनुप्रयोगों में राज्य प्रबंधन के बारे में

रिएक्टर डेवलपर को घटकों को डेटा स्थानांतरित करने के लिए दो मुख्य तंत्र प्रदान करता है। ये गुण (गुण) और अवस्था हैं। गुण केवल-पढ़े जाते हैं और माता-पिता के घटकों को बाल घटकों को विशेषता देने की अनुमति देते हैं। एक राज्य एक घटक के भीतर एक स्थानीय इकाई होती है जो किसी भी समय घटक के जीवन चक्र में बदल सकती है।

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

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

यहाँ Redux रिपॉजिटरी बनाने का तरीका बताया गया है:

import { createStore } from 'redux'; const initialState = {    auth: { loggedIn: false } } const store = createStore((state = initialState, action) => {    switch (action.type) {        case "LOG_IN":            return { ...state, auth: { loggedIn: true } };            break;        case "LOG_OUT":            return { ...state, auth: { loggedIn: false } };            break;        default:            return state;            break;    }    }) 

प्रतिक्रिया- redux पैकेज

प्रतिक्रिया-रिडक्स पैकेज Redux स्टेट कंटेनर के लिए रिएक्ट बाइंडिंग प्रदान करता है, जिससे रिएक्ट एप्लिकेशन को Redux रिपॉजिटरी से कनेक्ट करना बेहद आसान हो जाता है। यह आपको रिपॉजिटरी के साथ उनके संबंधों के आधार पर एक रिएक्ट एप्लिकेशन के घटकों को अलग करने की अनुमति देता है। अर्थात्, हम निम्नलिखित घटकों के बारे में बात कर रहे हैं:

1. प्रस्तुति घटक। वे केवल आवेदन की उपस्थिति के लिए जिम्मेदार हैं और Redux की स्थिति से अवगत नहीं हैं। वे संपत्तियों के माध्यम से डेटा प्राप्त करते हैं और कॉलबैक कॉल कर सकते हैं, जो गुणों के माध्यम से उनके पास भी जाते हैं।
2. कंटेनर घटक। वे आवेदन के आंतरिक तंत्र के संचालन के लिए जिम्मेदार हैं और Redux की स्थिति के साथ बातचीत करते हैं। वे अक्सर प्रतिक्रिया-रिडक्स का उपयोग करके बनाए जाते हैं, वे Redux कार्यों को भेज सकते हैं। इसके अलावा, वे राज्य परिवर्तनों की सदस्यता लेते हैं।

घटकों की जिम्मेदारी के विभाजन के लिए इस दृष्टिकोण के बारे में विवरण यहां पाया जा सकता है । इस लेख में, हम मुख्य रूप से प्रतिक्रिया-रिडक्स का उपयोग करके Redux राज्य से जुड़े कंटेनर घटकों के बारे में बात करेंगे।

प्रतिक्रिया-Redux पैकेज में एक बहुत ही सरल इंटरफ़ेस है। विशेष रूप से, इस इंटरफ़ेस के बारे में सबसे दिलचस्प बात निम्न के लिए आती है:

1. <Provider store> - आपको रिएक्ट एप्लिकेशन के लिए एक रैपर बनाने और इसकी पदानुक्रम में सभी कंटेनर घटकों के लिए Redux स्थिति उपलब्ध कराने की अनुमति देता है।
2. connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) - आपको उच्च-क्रम के घटक बनाने की अनुमति देता है। बुनियादी प्रतिक्रिया घटकों के आधार पर कंटेनर घटकों को बनाने के लिए यह आवश्यक है।

प्रोजेक्ट में इस पैकेज का उपयोग करने के लिए रिएक्शन-रिड्यूक्स स्थापित करें:

 npm install react-redux --save 

इस धारणा के आधार पर कि आपने पहले ही अपने रिएक्ट एप्लिकेशन के लिए Redux रिपॉजिटरी को कॉन्फ़िगर कर लिया है, यहां एप्लिकेशन को Redux रिपॉजिटरी से कनेक्ट करने का एक उदाहरण है:

 import React from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import createStore from './createReduxStore'; const store = createStore(); const rootElement = document.getElementById('root'); ReactDOM.render(( <Provider store={store}>   <AppRootComponent /> </Provider> ), rootElement); 

अब आप कंटेनर घटक बना सकते हैं जो Redux रिपॉजिटरी से जुड़े हैं। यह connect() एपीआई का उपयोग करके AppRootComponent के पदानुक्रम के भीतर किया जाता है।

कनेक्ट () का उपयोग कब करें?

कंटेनर घटकों का निर्माण

जैसा कि पहले ही उल्लेख किया गया है, प्रतिक्रिया-रिड्यूक connect() API का उपयोग कंटेनर घटकों को बनाने के लिए किया जाता है जो Redux रिपॉजिटरी से जुड़े होते हैं। जिस संग्रहण से आप कनेक्ट कर रहे हैं, वह प्रतिक्रिया संदर्भ तंत्र का उपयोग करके घटक के सबसे ऊपरी पूर्वज से प्राप्त किया जाता है। connect() फ़ंक्शन की आवश्यकता नहीं है यदि आप केवल प्रस्तुति घटक बनाते हैं।

यदि आप रिएक्ट घटक में, स्टोरेज से डेटा प्राप्त करना चाहते हैं, या आपको कार्यों को भेजने की आवश्यकता है, या आपको दोनों करने की आवश्यकता है, तो आप एक नियमित घटक को connect() करके लौटे एक उच्च-क्रम वाले घटक में लपेटकर कंटेनर घटक में बदल सकते connect() प्रतिक्रिया-redux। यहाँ यह कैसा दिखता है:

 import React from 'react'; import { connect } from 'react-redux'; import Profile from './components/Profile'; function ProfileContainer(props) { return (   props.loggedIn     ? <Profile profile={props.profile} />     : <div>Please login to view profile.</div> ) } const mapStateToProps = function(state) { return {   profile: state.user.profile,   loggedIn: state.auth.loggedIn } } export default connect(mapStateToProps)(ProfileContainer); 

। Redux स्टोरेज को मैन्युअल रूप से सब्सक्राइब करने की आवश्यकता को समाप्त करना

आप कंटेनर घटक को स्वयं बना सकते हैं और store.subscribe() कमांड का उपयोग करके Redux रिपॉजिटरी पर मैन्युअल रूप से हस्ताक्षर कर सकते हैं। हालांकि, connect() फ़ंक्शन का उपयोग करने का अर्थ है कुछ प्रदर्शन सुधार और अनुकूलन लागू करना जो आप अन्य तंत्रों का उपयोग करते समय उपयोग करने में सक्षम नहीं हो सकते हैं।

निम्नलिखित उदाहरण में, हम मैन्युअल रूप से एक कंटेनर घटक बनाने की कोशिश करते हैं और इसे सदस्यता देकर Redux रिपॉजिटरी से कनेक्ट करते हैं। यहां हम उसी कार्यक्षमता को लागू करने का प्रयास करते हैं जैसा कि पिछले उदाहरण में दिखाया गया है।

 import React, { Component } from 'react'; import store from './reduxStore'; import Profile from './components/Profile'; class ProfileContainer extends Component { state = this.getCurrentStateFromStore() getCurrentStateFromStore() {   return {     profile: store.getState().user.profile,     loggedIn: store.getState().auth.loggedIn   } } updateStateFromStore = () => {   const currentState = this.getCurrentStateFromStore();     if (this.state !== currentState) {     this.setState(currentState);   } } componentDidMount() {   this.unsubscribeStore = store.subscribe(this.updateStateFromStore); } componentWillUnmount() {   this.unsubscribeStore(); } render() {   const { loggedIn, profile } = this.state;     return (     loggedIn       ? <Profile profile={profile} />       : <div>Please login to view profile.</div>   ) } } export default ProfileContainer; 

connect() फ़ंक्शन, इसके अलावा, डेवलपर को अतिरिक्त लचीलापन देता है, जिससे आपको कंटेनर घटकों को कॉन्फ़िगर करने की अनुमति मिलती है जो मूल रूप से उन गुणों के आधार पर गतिशील गुण प्राप्त करते हैं। यह गुणों के आधार पर किसी राज्य से चयन प्राप्त करने के लिए, या गुणों से विशिष्ट चर के लिए एक्शन जनरेटर को जोड़ने के लिए बहुत उपयोगी साबित होता है।

यदि आपका रिएक्ट एप्लिकेशन कई Redux रिपॉजिटरी का उपयोग करता है, तो connect() विशिष्ट रिपॉजिटरी को निर्दिष्ट करना आसान बनाता है जिसमें कंटेनर घटक जुड़ा होना चाहिए।

एनाटॉमी कनेक्ट ()

प्रतिक्रिया-रिडक्स पैकेज द्वारा प्रदान किए गए connect() फ़ंक्शन में चार तर्क हो सकते हैं, जिनमें से प्रत्येक वैकल्पिक है। connect() फ़ंक्शन को कॉल करने के बाद, एक उच्च-ऑर्डर घटक वापस किया जाता है जिसे किसी भी रिएक्ट घटक को लपेटने के लिए उपयोग किया जा सकता है।

चूंकि फ़ंक्शन उच्च-ऑर्डर घटक देता है, इसलिए इसे कंटेनर कंटेनर में बदलने के लिए मूल रिएक्ट घटक को पास करते हुए इसे फिर से कॉल करने की आवश्यकता होती है:

 const ContainerComponent = connect()(BaseComponent); 

यहाँ connect() फ़ंक्शन के हस्ताक्षर हैं:

 connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options]) 

▍ mapStateToProps तर्क

mapStateToProps तर्क एक फ़ंक्शन है जो एक नियमित ऑब्जेक्ट या किसी अन्य फ़ंक्शन को लौटाता है। इस connect() तर्क Redux रिपॉजिटरी अपडेट में कंटेनर घटक को सब्सक्राइब करता है। इसका अर्थ यह है कि हर बार रिपॉजिटरी परिवर्तनों की स्थिति के लिए mapStateToProps फ़ंक्शन को कहा जाएगा। यदि आप स्थिति अद्यतनों की निगरानी में रुचि नहीं रखते हैं, तो इस तर्क के undefined या null के मान के रूप में connect() पास करें।

mapStateToProps फ़ंक्शन दो मापदंडों के साथ घोषित किया गया है, जिनमें से दूसरा वैकल्पिक है। पहला पैरामीटर Redux रिपॉजिटरी की वर्तमान स्थिति है। दूसरा पैरामीटर, यदि पास किया गया है, तो घटक को दिए गए गुणों का एक ऑब्जेक्ट है:

 const mapStateToProps = function(state) { return {   profile: state.user.profile,   loggedIn: state.auth.loggedIn } } export default connect(mapStateToProps)(ProfileComponent); 

यदि कोई नियमित ऑब्जेक्ट mapStateToProps से mapStateToProps , तो लौटी गई stateProps ऑब्जेक्ट घटक के गुणों के साथ संयुक्त है। आप इन गुणों को घटक में निम्नानुसार एक्सेस कर सकते हैं:

 function ProfileComponent(props) { return (   props.loggedIn     ? <Profile profile={props.profile} />     : <div>Please login to view profile.</div> ) } 

यदि mapStateToProps एक फ़ंक्शन देता है, तो यह फ़ंक्शन घटक के प्रत्येक उदाहरण के लिए mapStateToProps के रूप में उपयोग किया जाता है। यह प्रतिपादन प्रदर्शन में सुधार और ज्ञापन के लिए काम में आ सकता है।

▍ mapDispatchToProps तर्क

mapDispatchToProps तर्क या तो एक ऑब्जेक्ट या एक फ़ंक्शन हो सकता है जो या तो एक नियमित ऑब्जेक्ट या अन्य फ़ंक्शन देता है। mapDispatchToProps को बेहतर ढंग से चित्रित करने के लिए, हमें एक्शन जनरेटर की आवश्यकता है। मान लें कि हमारे पास निम्नलिखित जनरेटर हैं:

 export const writeComment = (comment) => ({ comment, type: 'WRITE_COMMENT' }); export const updateComment = (id, comment) => ({ id, comment, type: 'UPDATE_COMMENT' }); export const deleteComment = (id) => ({ id, type: 'DELETE_COMMENT' }); 

अब mapDispatchToProps के विभिन्न उपयोगों पर विचार करें।

डिफ़ॉल्ट डिफ़ॉल्ट कार्यान्वयन

यदि आप अपने स्वयं के mapDispatchToProps उपयोग नहीं करते mapDispatchToProps , किसी ऑब्जेक्ट या फ़ंक्शन द्वारा mapDispatchToProps कार्यान्वयन, एक मानक कार्यान्वयन का उपयोग किया जाएगा, जो घटक के लिए एक संपत्ति के रूप में dispatch() रिपॉजिटरी विधि को लागू करेगा। आप इस संपत्ति का उपयोग इस तरह से एक घटक में कर सकते हैं:

 import React from 'react'; import { connect } from 'react-redux'; import { updateComment, deleteComment } from './actions'; function Comment(props) { const { id, content } = props.comment; //    props.dispatch() const editComment = () => props.dispatch(updateComment(id, content)); const removeComment = () => props.dispatch(deleteComment(id)); return (   <div>     <p>{ content }</p>     <button type="button" onClick={editComment}>Edit Comment</button>     <button type="button" onClick={removeComment}>Remove Comment</button>   </div> ) } export default connect()(Comment); 

वस्तु हस्तांतरण

यदि किसी ऑब्जेक्ट का उपयोग mapDispatchToProps तर्क के रूप में किया जाता है, तो ऑब्जेक्ट में प्रत्येक फ़ंक्शन को Redux एक्शन जनरेटर के रूप में लिया जाएगा और एक dispatch() रिपॉजिटरी विधि कॉल में लपेटा जाएगा, जो इसे सीधे कॉल करने की अनुमति देगा। कार्रवाई जनरेटर के साथ परिणामी वस्तु, dispatchProps , घटक के गुणों के साथ जोड़ा जाएगा।

निम्न उदाहरण mapDispatchToProps तर्क के निर्माण का एक उदाहरण mapDispatchToProps है, जो कि एक्शन जनरेटर के साथ एक ऑब्जेक्ट है, साथ ही जनरेटर कैसे रिएक्ट घटक के गुणों के रूप में इस्तेमाल किया जा सकता है:

 import React from 'react'; import { connect } from 'react-redux'; import { updateComment, deleteComment } from './actions'; function Comment(props) { const { id, content } = props.comment; // ,   ,   const editComment = () => props.updatePostComment(id, content); const removeComment = () => props.deletePostComment(id); return (   <div>     <p>{ content }</p>     <button type="button" onClick={editComment}>Edit Comment</button>     <button type="button" onClick={removeComment}>Remove Comment</button>   </div> ) } //     const mapDispatchToProps = { updatePostComment: updateComment, deletePostComment: deleteComment } export default connect(null, mapDispatchToProps)(Comment); 

समारोह हस्तांतरण

जब एक तर्क के रूप में फंक्शन mapDispatchToProps का उपयोग करते हैं mapDispatchToProps तो प्रोग्रामर को mapDispatchToProps ऑब्जेक्ट को वापस करने का ध्यान रखना चाहिए, जो dispatch() स्टोरेज विधि का उपयोग करके एक्शन जनरेटर के बाइंडिंग को लागू करता है। यह फ़ंक्शन पहले पैरामीटर के रूप में स्वीकार करता है, dispatch() रिपॉजिटरी विधि। mapStateToProps साथ, फ़ंक्शन वैकल्पिक दूसरे पैरामीटर को भी स्वीकार कर सकता है, जो कि घटक को दिए गए मूल गुणों के साथ मैपिंग का वर्णन करता है।

यदि यह फ़ंक्शन दूसरा फ़ंक्शन देता है, तो दिए गए फ़ंक्शन का उपयोग mapDispatchToProps रूप में किया जाता है, जो रेंडरिंग प्रदर्शन और ज्ञापन में सुधार के लिए उपयोगी हो सकता है।

Redux से bindActionCreators() हेल्पर फ़ंक्शन का उपयोग इस फ़ंक्शन के अंदर एक्शन जेनरेटरों को dispatch() रिपॉजिटरी विधि से बाँधने के लिए किया जा सकता है।

निम्न उदाहरण एक फ़ंक्शन के, mapDispatchToProps की भूमिका में उपयोग को दर्शाता है। यह सहायक फ़ंक्शन bindActionCreators() साथ काम को भी प्रदर्शित करता है, जिसका उपयोग props.actions घटक के props.actions पर टिप्पणियों के साथ काम करने के लिए एक्शन जनरेटर को बांधने के लिए किया जाता है:

 import React from 'react'; import { connect } from 'react-redux'; import { bindActionCreators } from 'redux'; import * as commentActions from './actions'; function Comment(props) { const { id, content } = props.comment; const { updateComment, deleteComment } = props.actions; //    props.actions const editComment = () => updateComment(id, content); const removeComment = () => deleteComment(id); return (   <div>     <p>{ content }</p>     <button type="button" onClick={editComment}>Edit Comment</button>     <button type="button" onClick={removeComment}>Remove Comment</button>   </div> ) } const mapDispatchToProps = (dispatch) => { return {   actions: bindActionCreators(commentActions, dispatch) } } export default connect(null, mapDispatchToProps)(Comment); 

RArgument मर्जप्रॉप्स

यदि mergeProps तर्क को connect() लिए पारित किया गया है connect() , तो यह एक फ़ंक्शन है जो निम्नलिखित तीन मापदंडों को लेता है:

• stateProps mapStateToProps() कॉल से लौटाई गई संपत्ति ऑब्जेक्ट है।
• dispatchProps - mapDispatchToProps() से एक्शन जनरेटर के साथ एक प्रॉपर्टी ऑब्जेक्ट।
• ownProps - घटक द्वारा प्राप्त मूल गुण।

यह फ़ंक्शन गुणों के साथ एक साधारण वस्तु देता है जो लिपटे घटक को पारित किया जाएगा। यह Redux रिपॉजिटरी या प्रॉपर्टी-बेस्ड एक्शन जनरेटरों के राज्य के सशर्त मानचित्रण भाग के लिए उपयोगी है।

यदि connect() इस फ़ंक्शन को पास नहीं करता है, तो इसका मानक कार्यान्वयन उपयोग किया जाता है:

 const mergeProps = (stateProps, dispatchProps, ownProps) => { return Object.assign({}, ownProps, stateProps, dispatchProps) } 

मापदंडों के साथ एक वस्तु का प्रतिनिधित्व mentArgument

चौथे तर्क के रूप में connect() फ़ंक्शन के लिए पारित एक वैकल्पिक वस्तु, इस फ़ंक्शन के व्यवहार को बदलने के लिए डिज़ाइन किए गए पैरामीटर शामिल हैं। तो, connect() connectAdvanced() फ़ंक्शन का एक विशेष कार्यान्वयन है, यह connectAdvanced() , साथ ही कुछ अतिरिक्त मापदंडों के लिए उपलब्ध अधिकांश मापदंडों को स्वीकार करता है।

यहां प्रलेखन पृष्ठ है, जिसे पढ़ने के बाद आप यह पता लगा सकते हैं कि connect() साथ किन मापदंडों का उपयोग किया जा सकता है, और वे इस फ़ंक्शन के व्यवहार को कैसे संशोधित करते हैं।

कनेक्ट () फ़ंक्शन का उपयोग करना

▍Create भंडारण

connect() का उपयोग करके एक नियमित घटक घटक को कंटेनर घटक में परिवर्तित करने से पहले, आपको एक Redux रिपॉजिटरी बनाने की आवश्यकता है जिससे यह घटक जुड़ा होगा।

मान लें कि हमारे पास एक कंटेनर घटक NewComment , जिसका उपयोग प्रकाशन में नई टिप्पणियों को जोड़ने के लिए किया जाता है, और, इसके अलावा, टिप्पणी भेजने के लिए एक बटन प्रदर्शित करता है। इस घटक का वर्णन करने वाला कोड इस तरह दिख सकता है:

 import React from 'react'; import { connect } from 'react-redux'; class NewComment extends React.Component { input = null writeComment = evt => {   evt.preventDefault();   const comment = this.input.value;     comment && this.props.dispatch({ type: 'WRITE_COMMENT', comment }); } render() {   const { id, content } = this.props.comment;     return (     <div>       <input type="text" ref={e => this.input = e} placeholder="Write a comment" />       <button type="button" onClick={this.writeComment}>Submit Comment</button>     </div>   ) } } export default connect()(NewComment); 

इस घटक को अनुप्रयोग में उपयोग करने के लिए, Redux रिपॉजिटरी का वर्णन करना आवश्यक होगा जिससे यह घटक जुड़ा होना चाहिए। अन्यथा, एक त्रुटि उत्पन्न होगी। यह दो तरीकों से किया जा सकता है, जिस पर अब हम विचार करेंगे।

एक कंटेनर घटक में स्टोर संपत्ति सेट करना

Redux रिपॉजिटरी के साथ एक घटक को लैस करने का पहला तरीका घटक के store संपत्ति के मूल्य के रूप में इस तरह के रिपॉजिटरी के लिए एक लिंक पारित करना है:

 import React from 'react'; import store from './reduxStore'; import NewComment from './components/NewComment'; function CommentsApp(props) { return <NewComment store={store} /> } 

<प्रदाता> घटक में स्टोर संपत्ति सेट करना

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

प्रतिक्रिया-रिडक्स पैकेज डेवलपर को <Provider> घटक प्रदान करता है, जिसका उपयोग एप्लिकेशन के रूट घटक को लपेटने के लिए किया जा सकता है। यह store संपत्ति को स्वीकार करता है। यह माना जाता है कि यह Redux रिपॉजिटरी की एक कड़ी है, जिसे एप्लिकेशन में उपयोग करने की योजना है। store संपत्ति को पारित किया जाता है, आवेदन पदानुक्रम के अनुसार, कंटेनर घटकों को, प्रतिक्रिया संदर्भ तंत्र का उपयोग करते हुए:

 import React from 'react'; import ReactDOM from 'react-dom'; import store from './reduxStore'; import { Provider } from 'react-redux'; import NewComment from './components/NewComment'; function CommentsApp(props) { return <NewComment /> } ReactDOM.render(( <Provider store={store}>   <CommentsApp /> </Provider> ), document.getElementById('root')) 

▍ऑपेनप्रॉप्स एक्सेस ऑर्गनाइजेशन

जैसा कि पहले ही उल्लेख किया गया है, mapStateToProps और mapDispatchToProps फ़ंक्शन को connect() करने के connect() mapStateToProps connect() दूसरे पैरामीटर के साथ ही घोषित किया जा सकता है, जो कि घटक के गुण हैं।
हालाँकि, एक समस्या है। यदि घोषित फ़ंक्शन के आवश्यक मापदंडों की संख्या 2 से कम है, तो ownProps संचारित नहीं होंगे। लेकिन यदि कोई फ़ंक्शन किसी आवश्यक पैरामीटर के साथ या कम से कम 2 मापदंडों के साथ घोषित किया जाता है, तो ownProps जाएंगे।

खुद के साथ काम करने के लिए कई विकल्पों पर विचार करें।

मापदंडों के बिना फ़ंक्शन की घोषणा

 const mapStateToProps = function() { console.log(arguments[0]); // state console.log(arguments[1]); // ownProps }; 

इस स्थिति में, ownProps पारित किया जाता है, क्योंकि फ़ंक्शन को आवश्यक मापदंडों के बिना घोषित किया जाता है। नतीजतन, शेष ईएस 6 मापदंडों के लिए नए सिंटैक्स का उपयोग करके लिखा गया कोड काम करेगा:

 const mapStateToProps = function(...args) { console.log(args[0]); // state console.log(args[1]); // ownProps }; 

एक पैरामीटर के साथ फ़ंक्शन की घोषणा

निम्नलिखित उदाहरण पर विचार करें:

 const mapStateToProps = function(state) { console.log(state); // state console.log(arguments[1]); // undefined }; 

केवल एक पैरामीटर है, state । परिणामस्वरूप, arguments[1] इस तथ्य के कारण undefined मान लेता है कि ownProps संचारित नहीं होते हैं।

डिफ़ॉल्ट पैरामीटर के साथ फ़ंक्शन की घोषणा

 const mapStateToProps = function(state, ownProps = {}) { console.log(state); // state console.log(ownProps); // {} }; 

केवल एक आवश्यक पैरामीटर है, state , चूंकि दूसरा पैरामीटर, ownProps वैकल्पिक है, क्योंकि इसका डिफ़ॉल्ट मान है। नतीजतन, चूंकि केवल एक ही आवश्यक पैरामीटर है, ownProps पास नहीं किया जाता है, और मैपिंग को डिफ़ॉल्ट मान के साथ किया जाता है जो इसे सौंपा गया था, अर्थात एक खाली वस्तु के साथ।

दो मापदंडों के साथ एक फ़ंक्शन की घोषणा

 const mapStateToProps = function(state, ownProps) { console.log(state); // state console.log(ownProps); // ownProps }; 

सब कुछ बहुत सरलता से व्यवस्थित है। अर्थात्, ऐसी स्थिति में, ownProps के ट्रांसफर को इस तथ्य के कारण किया जाता है कि फ़ंक्शन दो आवश्यक मापदंडों के साथ घोषित किया गया है।

परिणाम

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

प्रिय पाठकों! क्या आप अपनी परियोजनाओं में प्रतिक्रिया-रिडक्स का उपयोग करते हैं?