👉🏾 🎚️ 😸 Redux बनाम प्रतिक्रिया संदर्भ एपीआई 🍛 🥥 🤾🏽

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

हालांकि, अब कॉन्टेक्ट एपीआई रिएक्ट का एक पूर्ण हिस्सा है, उपयोग के लिए खुला (पहले की तरह आधिकारिक तौर पर नहीं)।

16.3 की प्रतिक्रिया के तुरंत बाद, लेख दिखाई दिए कि नए संदर्भ एपीआई के कारण Redux की मृत्यु की घोषणा की गई। यदि आपने रेडक्स से इस बारे में पूछा था, तो मुझे लगता है कि उन्होंने जवाब दिया होगा - "मेरी मौत की खबरें बहुत अतिरंजित हैं ।"

इस पोस्ट में मैं बात करना चाहता हूं कि नया कॉन्टेक्स्ट एपीआई कैसे काम करता है, यह Redux की तरह कैसे दिखता है, जब आप Redux के बजाय Context का उपयोग कर सकते हैं, और Context प्रत्येक मामले में Redux की जगह क्यों नहीं लेता है।

यदि आप केवल संदर्भ एपीआई का अवलोकन चाहते हैं, तो आप लिंक का अनुसरण कर सकते हैं।

प्रतिक्रिया आवेदन उदाहरण

मैं यह मानने जा रहा हूं कि आपके पास रिएक्ट (प्रॉप्स एंड स्टेट) में राज्य के साथ काम करने के सिद्धांतों की समझ है, लेकिन अगर ऐसा नहीं है, तो मुझे आपके बारे में जानने में मदद करने के लिए 5 दिन का एक निशुल्क कोर्स है ।

आइए एक उदाहरण देखें जो हमें Redux में उपयोग की जाने वाली अवधारणा के लिए लाता है। हम प्रतिक्रिया के एक सरल संस्करण के साथ शुरू करेंगे, और फिर देखें कि यह Redux में और अंत में प्रसंग के साथ कैसा दिखता है।

इस एप्लिकेशन में, उपयोगकर्ता जानकारी दो स्थानों पर प्रदर्शित होती है: ऊपरी दाएं कोने में नेविगेशन बार में और मुख्य सामग्री के बगल में साइड पैनल में।

(आप देख सकते हैं कि ट्विटर के साथ बहुत सी समानताएँ हैं। यह कोई संयोग नहीं है। आपके रिएक्ट कौशल को सुधारने के सर्वोत्तम तरीकों में से एक है कॉपी करना (मौजूदा साइटों / एप्लिकेशन की प्रतिकृतियां बनाना) ।

घटक की संरचना इस तरह दिखती है:

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

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

आइए देखें कि यह कोड में कैसे काम करता है (मैंने इसे पढ़ने के लिए आसान बनाने के लिए एक फाइल में सब कुछ डाल दिया, लेकिन वास्तव में यह कुछ मानक संरचना का पालन करते हुए संभवतः अलग-अलग फाइलों में विभाजित हो जाएगा)।

import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const UserAvatar = ({ user, size }) => ( <img className={`user-avatar ${size || ""}`} alt="user avatar" src={user.avatar} /> ); const UserStats = ({ user }) => ( <div className="user-stats"> <div> <UserAvatar user={user} /> {user.name} </div> <div className="stats"> <div>{user.followers} Followers</div> <div>Following {user.following}</div> </div> </div> ); const Nav = ({ user }) => ( <div className="nav"> <UserAvatar user={user} size="small" /> </div> ); const Content = () => <div className="content">main content here</div>; const Sidebar = ({ user }) => ( <div className="sidebar"> <UserStats user={user} /> </div> ); const Body = ({ user }) => ( <div className="body"> <Sidebar user={user} /> <Content user={user} /> </div> ); class App extends React.Component { state = { user: { avatar: "https://www.gravatar.com/avatar/5c3dd2d257ff0e14dbd2583485dbd44b", name: "Dave", followers: 1234, following: 123 } }; render() { const { user } = this.state; return ( <div className="app"> <Nav user={user} /> <Body user={user} /> </div> ); } } ReactDOM.render(<App />, document.querySelector("#root"));

CodeSandbox नमूना कोड

यहाँ App उपयोगकर्ता ऑब्जेक्ट युक्त स्थिति को इनिशियलाइज़ करता है । एक वास्तविक एप्लिकेशन में, आपको सर्वर से इस डेटा को निकालने और रेंडर करने के लिए इसे राज्य में सहेजने की सबसे अधिक संभावना है।

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

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

बारीकी से युग्मित घटक (जैसे कि जो अपने बच्चों को सहारा देते हैं) का पुन: उपयोग करना कठिन होता है, क्योंकि जब भी आप उन्हें एक नई जगह पर उपयोग करते हैं, तो आपको उन्हें नए माता-पिता के साथ बांधना होगा।

आइए देखें कि हम इसे कैसे सुधार सकते हैं।

प्रसंग या Redux का उपयोग करने से पहले ...

यदि आप अपने एप्लिकेशन की संरचना को संयोजित करने और वंशजों को प्रॉप्स का लाभ उठाने का एक तरीका खोज सकते हैं, तो यह आपके कोड क्लीनर को प्रॉम्प्स, कॉनटेक्स्ट , या रेडक्स के गहरे आगे का सहारा लिए बिना बना सकता है।

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

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

( इस प्रस्ताव के लिए डैन अब्रामोव को धन्यवाद!)

 import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; const UserAvatar = ({ user, size }) => ( <img className={`user-avatar ${size || ""}`} alt="user avatar" src={user.avatar} /> ); const UserStats = ({ user }) => ( <div className="user-stats"> <div> <UserAvatar user={user} /> {user.name} </div> <div className="stats"> <div>{user.followers} Followers</div> <div>Following {user.following}</div> </div> </div> ); //  children   . const Nav = ({ children }) => ( <div className="nav"> {children} </div> ); const Content = () => ( <div className="content">main content here</div> ); const Sidebar = ({ children }) => ( <div className="sidebar"> {children} </div> ); // Body   sidebar  content,    , //    . const Body = ({ sidebar, content }) => ( <div className="body"> <Sidebar>{sidebar}</Sidebar> {content} </div> ); class App extends React.Component { state = { user: { avatar: "https://www.gravatar.com/avatar/5c3dd2d257ff0e14dbd2583485dbd44b", name: "Dave", followers: 1234, following: 123 } }; render() { const { user } = this.state; return ( <div className="app"> <Nav> <UserAvatar user={user} size="small" /> </Nav> <Body sidebar={<UserStats user={user} />} content={<Content />} /> </div> ); } } ReactDOM.render(<App />, document.querySelector("#root"));

CodeSandbox नमूना कोड

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

Redux उदाहरण

मैं Redux उदाहरण पर एक त्वरित नज़र डालूंगा ताकि हम बेहतर ढंग से समझ सकें कि कॉन्टेक्स्ट कैसे काम करता है, इसलिए यदि आपके पास Redux की स्पष्ट समझ नहीं है, तो पहले Redux से मेरा परिचय पढ़ें (या वीडियो देखें )।

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

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

रेड्यूसर यहाँ बहुत कम करता है; यह बहुत आसान है। मेरे पास एक और बात है कि Redux Reducers कैसे काम करता है और कैसे उपयोग किए जाने वाले अपरिवर्तनीय कोड को लिखता है ।

 import React from "react"; import ReactDOM from "react-dom"; //    createStore, connect, and Provider: import { createStore } from "redux"; import { connect, Provider } from "react-redux"; //  reducer       . const initialState = {}; function reducer(state = initialState, action) { switch (action.type) { //    action SET_USER  state. case "SET_USER": return { ...state, user: action.user }; default: return state; } } //  store  reducer'   . const store = createStore(reducer); // Dispatch' action     user. store.dispatch({ type: "SET_USER", user: { avatar: "https://www.gravatar.com/avatar/5c3dd2d257ff0e14dbd2583485dbd44b", name: "Dave", followers: 1234, following: 123 } }); //   mapStateToProps,      state (user) //     `user` prop. const mapStateToProps = state => ({ user: state.user }); //  UserAvatar    connect(),    //`user` ,      . //     2 : // const UserAvatarAtom = ({ user, size }) => ( ... ) // const UserAvatar = connect(mapStateToProps)(UserAvatarAtom); const UserAvatar = connect(mapStateToProps)(({ user, size }) => ( <img className={`user-avatar ${size || ""}`} alt="user avatar" src={user.avatar} /> )); //   UserStats    connect(),    // `user` . const UserStats = connect(mapStateToProps)(({ user }) => ( <div className="user-stats"> <div> <UserAvatar /> {user.name} </div> <div className="stats"> <div>{user.followers} Followers</div> <div>Following {user.following}</div> </div> </div> )); //    Nav      `user`. const Nav = () => ( <div className="nav"> <UserAvatar size="small" /> </div> ); const Content = () => ( <div className="content">main content here</div> ); //   Sidebar. const Sidebar = () => ( <div className="sidebar"> <UserStats /> </div> ); //   Body. const Body = () => ( <div className="body"> <Sidebar /> <Content /> </div> ); //  App    ,     . const App = () => ( <div className="app"> <Nav /> <Body /> </div> ); //     Provider, //   connect()    store. ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.querySelector("#root") );

CodeSandbox नमूना कोड

अब आप शायद सोच रहे होंगे कि Redux इस जादू को कैसे हासिल करता है। यह आश्चर्यजनक है। रिएक्ट कई स्तरों पर पासिंग प्रॉपर का समर्थन नहीं करता है, और क्या Redux ऐसा कर सकता है?

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

संदर्भ प्रत्येक घटक के बाद एक कंप्यूटर बस के समान है: इसके माध्यम से गुजरने वाली शक्ति (डेटा) प्राप्त करने के लिए, आपको केवल कनेक्ट करने की आवश्यकता है। और प्रतिक्रिया- redux कनेक्ट बस यही करता है।

हालाँकि, यह Redux फीचर हिमशैल का सिरा है। डेटा को सिर्फ सही जगह पर स्थानांतरित करना Redux की विशेषताओं में सबसे स्पष्ट है। यहां कुछ अन्य लाभ दिए गए हैं जो आप बॉक्स से बाहर निकलते हैं:

कनेक्ट एक शुद्ध कार्य है

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

Redux के साथ आसान डिबगिंग

लिखने की क्रिया और रिड्यूसर्स के समारोह को डिबगिंग की अद्भुत आसानी से संतुलित किया जाता है जो रेडक्स आपको देता है।

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

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

LogRocket जैसे उपकरण भी हैं, जो मूल रूप से आपके प्रत्येक उपयोगकर्ता के लिए उत्पादन में स्थायी Redux DevTools देते हैं। एक बग रिपोर्ट मिली? समस्या नहीं है। LogRocket में इस उपयोगकर्ता सत्र को देखें, और आप देख सकते हैं कि उसने क्या किया और क्या कार्रवाई शुरू की गई। यह सब Redux एक्शन स्ट्रीम का उपयोग करके काम करता है।

मिडलवेयर के साथ Redux का विस्तार

Redux मिडलवेयर कॉन्सेप्ट ("एक फंक्शन जो हर बार एक्शन भेजे जाने पर चलता है" के लिए एक फैंसी शब्द) का समर्थन करता है। अपने खुद के मिडलवेयर को लिखना उतना मुश्किल नहीं है जितना यह लग सकता है, और आपको कुछ शक्तिशाली टूल का उपयोग करने की अनुमति देता है।

उदाहरण के लिए ...

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

यहाँ एक अच्छा लेख है कि कैसे Redux मिडलवेयर लिखने के उदाहरणों के साथ।

React Context API का उपयोग कैसे करें

लेकिन शायद आपको इन सभी Redux विषमताओं की आवश्यकता नहीं है। आपको सरल डिबगिंग, ट्यूनिंग या स्वचालित प्रदर्शन सुधार की आवश्यकता नहीं हो सकती है - आप जो भी करना चाहते हैं वह आसानी से डेटा स्थानांतरित करना है। हो सकता है कि आपका एप्लिकेशन छोटा हो, या आपको बस जल्दी से कुछ करने और बाद में सूक्ष्मताओं से निपटने की आवश्यकता है।

नया संदर्भ एपीआई शायद आपके लिए सही है। आइए देखें कि यह कैसे काम करता है।

यदि आप पढ़ने (3:43) के बजाय देखना चाहते हैं तो मैंने एगहेड पर एक त्वरित संदर्भ एपीआई ट्यूटोरियल पोस्ट किया है।

यहाँ संदर्भ एपीआई के 3 महत्वपूर्ण घटक हैं:

React.createContext फ़ंक्शन जो संदर्भ बनाता है
प्रदाता (रिटर्न क्रोनटेक्स्ट), जो "बस" सेट करता है,
घटक पेड़ के माध्यम से गुजर रहा है
उपभोक्ता (createContext भी लौटा) जो इसमें भिगो देता है
डेटा निष्कर्षण के लिए "इलेक्ट्रिक बस"

प्रदाता रिएक्ट-रेडक्स में प्रदाता के समान है। यह एक ऐसा मूल्य लेता है जो आप चाहते हैं (यह एक Redux स्टोर भी हो सकता है ... लेकिन यह बेवकूफी होगी)। सबसे अधिक संभावना है, यह आपके डेटा और किसी भी कार्य से संबंधित एक ऑब्जेक्ट है जिसे आप डेटा के साथ प्रदर्शन करना चाहते हैं।

उपभोक्ता रिएक्ट-रेडक्स में कनेक्ट फंक्शन की तरह थोड़ा काम करता है, डेटा से जुड़ता है और इसे इस्तेमाल करने वाले घटक को उपलब्ध कराता है।

यहाँ पर प्रकाश डाला गया है:

 //     context //    2 : { Provider, Consumer } // ,   ,  UpperCase,  camelCase //  ,          , //        . const UserContext = React.createContext(); // ,     context, //   Consumer. // Consumer   "render props". const UserAvatar = ({ size }) => ( <UserContext.Consumer> {user => ( <img className={`user-avatar ${size || ""}`} alt="user avatar" src={user.avatar} /> )} </UserContext.Consumer> ); // ,      "user prop", //   Consumer    context. const UserStats = () => ( <UserContext.Consumer> {user => ( <div className="user-stats"> <div> <UserAvatar user={user} /> {user.name} </div> <div className="stats"> <div>{user.followers} Followers</div> <div>Following {user.following}</div> </div> </div> )} </UserContext.Consumer> ); // ...    ... // ... (      `user`). //  App   context ,  Provider. class App extends React.Component { state = { user: { avatar: "https://www.gravatar.com/avatar/5c3dd2d257ff0e14dbd2583485dbd44b", name: "Dave", followers: 1234, following: 123 } }; render() { return ( <div className="app"> <UserContext.Provider value={this.state.user}> <Nav /> <Body /> </UserContext.Provider> </div> ); } }

CodeSandbox नमूना कोड

आइए देखें कि यह कैसे काम करता है।

याद रखें, हमारे पास 3 भाग हैं: संदर्भ (React.createContext का उपयोग करके बनाया गया) और इसके साथ बातचीत करने वाले दो घटक (प्रदाता और उपभोक्ता)।

प्रदाता और उपभोक्ता एक साथ काम करते हैं

प्रदाता और उपभोक्ता संबंधित और अविभाज्य हैं। वे केवल एक दूसरे के साथ बातचीत करना जानते हैं। यदि आपने दो अलग-अलग संदर्भ बनाए हैं, तो "संदर्भ 1" और "संदर्भ 2" कहें, तो प्रदाता और उपभोक्ता संदर्भ 1 प्रदाता और उपभोक्ता संदर्भ 2 के साथ संवाद करने में सक्षम नहीं होंगे।

प्रसंग में राज्य नहीं होता है

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

जब आप एक संदर्भ बनाते हैं, तो आप "डिफ़ॉल्ट" निम्नानुसार पारित कर सकते हैं:

 const Ctx = React.createContext(yourDefaultValue);

डिफ़ॉल्ट मूल्य वह है जो उपभोक्ता को प्राप्त होगा जब इसे ऊपर प्रदाता के बिना पेड़ में रखा जाएगा। यदि आप इसे पास नहीं करते हैं, तो मूल्य अपरिभाषित होगा। ध्यान दें कि यह डिफ़ॉल्ट मान है , प्रारंभिक मूल्य नहीं। प्रसंग कुछ बचा नहीं; यह सिर्फ उस डेटा को फैलाता है जिसे आप इसमें पास करते हैं।

उपभोक्ता रेंडर प्रॉप्स पैटर्न का उपयोग करता है

कनेक्ट Redux फ़ंक्शन एक उच्च आदेश घटक (संक्षिप्त रूप में HoC) है। यह एक और घटक लपेटता है और इसमें प्रॉपर गुजरता है।

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

प्रदाता एक मूल्य लेता है।

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

प्रसंग एपीआई लचीला

संदर्भ बनाने के बाद से हमें (प्रदाता और उपभोक्ता) के साथ काम करने के लिए दो घटक मिलते हैं, हम उनका उपयोग कर सकते हैं जैसा हम चाहते हैं। यहाँ विचारों के एक जोड़े हैं।

HOC में लपेटें उपभोक्ता

हर उस जगह के आसपास UserContext.Consumer जोड़ने का विचार पसंद नहीं है जिसे इसकी आवश्यकता है? यह आपका कोड है! आपको यह तय करने का अधिकार है कि आपकी सबसे अच्छी पसंद क्या होगी।

यदि आप मूल्य को प्रोप के रूप में प्राप्त करना पसंद करते हैं, तो आप उपभोक्ता के चारों ओर एक छोटा आवरण लिख सकते हैं:

 function withUser(Component) { return function ConnectedComponent(props) { return ( <UserContext.Consumer> {user => <Component {...props} user={user}/>} </UserContext.Consumer> ); } }

उसके बाद, आप फिर से लिख सकते हैं, उदाहरण के लिए, उपयोगकर्ताअवतार withUser फ़ंक्शन का उपयोग कर रहा है:

 const UserAvatar = withUser(({ size, user }) => ( <img className={`user-avatar ${size || ""}`} alt="user avatar" src={user.avatar} /> ));

और वॉइला, संदर्भ कनेक्ट Redux की तरह काम कर सकते हैं। माइनस स्वचालित सफाई।

यहाँ इस HOC के साथ CodeSandbox का एक उदाहरण दिया गया है।

प्रदाता में राज्य रखें

याद रखें कि प्रदाता सिर्फ एक चैनल है। यह किसी भी डेटा को सेव नहीं करता है। लेकिन यह आपको डेटा संग्रहीत करने के लिए अपना स्वयं का आवरण बनाने से नहीं रोकता है।

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

 class UserStore extends React.Component { state = { user: { avatar: "https://www.gravatar.com/avatar/5c3dd2d257ff0e14dbd2583485dbd44b", name: "Dave", followers: 1234, following: 123 } }; render() { return ( <UserContext.Provider value={this.state.user}> {this.props.children} </UserContext.Provider> ); } } // ...    ... const App = () => ( <div className="app"> <Nav /> <Body /> </div> ); ReactDOM.render( <UserStore> <App /> </UserStore>, document.querySelector("#root") );

अब उपयोगकर्ता डेटा अपने स्वयं के घटक में निहित है, जिसका एकमात्र कार्य यह डेटा है। कूल। ऐप फिर से स्टेटलेस हो सकता है। मुझे लगता है कि यह थोड़ा साफ दिखता है।

इस UserStore के साथ एक CodeSandbox उदाहरण दिया गया है।

संदर्भ के माध्यम से कार्यों को नीचे फेंक दें

याद रखें कि प्रदाता के माध्यम से पारित वस्तु में वह सब कुछ हो सकता है जो आप चाहते हैं। इसका मतलब है कि इसमें फ़ंक्शंस हो सकते हैं। आप उन्हें क्रियाओं का नाम भी दे सकते हैं।

यहां एक नया उदाहरण है: पृष्ठभूमि रंग को स्विच करने के लिए एक साधारण कमरा - ओह, मेरा मतलब है प्रकाश।

राज्य स्टोर में संग्रहीत किया जाता है, जिसमें प्रकाश स्विचिंग फ़ंक्शन भी होता है। राज्य और फ़ंक्शन दोनों को संदर्भ के माध्यम से पारित किया जाता है।

 import React from "react"; import ReactDOM from "react-dom"; import "./styles.css"; //  context. const RoomContext = React.createContext(); // ,     //   . class RoomStore extends React.Component { state = { isLit: false }; toggleLight = () => { this.setState(state => ({ isLit: !state.isLit })); }; render() { //  state  onToggleLight action return ( <RoomContext.Provider value={{ isLit: this.state.isLit, onToggleLight: this.toggleLight }} > {this.props.children} </RoomContext.Provider> ); } } //    ,    , //       RoomContext. const Room = () => ( <RoomContext.Consumer> {({ isLit, onToggleLight }) => ( <div className={`room ${isLit ? "lit" : "dark"}`}> The room is {isLit ? "lit" : "dark"}. <br /> <button onClick={onToggleLight}>Flip</button> </div> )} </RoomContext.Consumer> ); const App = () => ( <div className="app"> <Room /> </div> ); //     RoomStore, //           . ReactDOM.render( <RoomStore> <App /> </RoomStore>, document.querySelector("#root") );

यहाँ CodeSandbox में पूरी तरह से काम करने का उदाहरण दिया गया है।

तो आखिरकार, क्या उपयोग करें, संदर्भ या Redux?

अब जब आपने दोनों पथ देख लिए हैं, तो कौन सा उपयोग करने लायक है? मुझे पता है कि आप सिर्फ इस सवाल का जवाब सुनना चाहते हैं, लेकिन मुझे जवाब देना होगा - "यह आप पर निर्भर करता है।"

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

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

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

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

आज, यदि Redux आपकी आवश्यकता से अधिक है, तो आप संदर्भ का उपयोग कर सकते हैं।

सीखना प्रतिक्रिया मुश्किल हो सकती है - बहुत सारे पुस्तकालय और उपकरण हैं!

मेरी सलाह है उन सभी पर ध्यान न दें :)

एक कदम-दर-चरण ट्यूटोरियल के लिए, मेरी पुस्तक , शुद्ध प्रतिक्रिया पढ़ें ।

Redux बनाम प्रतिक्रिया संदर्भ एपीआई

प्रतिक्रिया आवेदन उदाहरण

प्रसंग या Redux का उपयोग करने से पहले ...

Redux उदाहरण

React Context API का उपयोग कैसे करें

प्रसंग एपीआई लचीला

More articles: