Redux अंतर्निहित रिएक्ट संदर्भ और हुक के साथ वैकल्पिक

अनुवादक से:

मैं एक लेख का मुफ्त अनुवाद प्रस्तुत करता हूं कि कैसे Redux को रिएक्ट संदर्भ और हुक के साथ बदलने के लिए एक प्रभावी समाधान लागू किया जाए। अनुवाद या पाठ में त्रुटियों का संकेत स्वागत योग्य है। अपने देखने का आनंद लें।

---

16.3.0 रिएक्ट में नए संदर्भ एपीआई की रिहाई के बाद से, कई लोगों ने खुद से पूछा है कि क्या नया एपीआई इसे Redux के प्रतिस्थापन के लिए पर्याप्त है? मैंने भी यही सोचा था, लेकिन हुक के साथ संस्करण 16.8.0 के रिलीज होने के बाद भी मैं पूरी तरह से समझ नहीं पाया। मैं लोकप्रिय प्रौद्योगिकियों का उपयोग करने की कोशिश करता हूं, पथ हमेशा उन समस्याओं की पूरी श्रृंखला को नहीं समझ रहा है जो वे हल करते हैं, इसलिए मैं भी Redux के लिए उपयोग किया जाता हूं।

और इसलिए यह हुआ कि मैंने कैंट सी। डोड्स के समाचार पत्र के लिए साइन अप किया और संदर्भ और राज्य प्रबंधन के विषय पर कुछ ईमेल की खोज की। मैं पढ़ने लगा…। और पढ़ें ... और 5 ब्लॉग पोस्ट के बाद, कुछ क्लिक किया गया।

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

तैयार करने के लिए, चलो दो प्रतीत होता है यादृच्छिक युक्तियों के साथ शुरू करते हैं।

सबसे पहले, मैं अपने दोस्त को दिलासा देता हूं।

 console.count('Button') // Button: 1 console.count('Button') // Button: 2 console.count('App') // App: 1 console.count('Button') // Button: 3 

हम प्रत्येक घटक को एक console.count कॉल जोड़कर देखेंगे कि यह कितनी बार प्रस्तुत किया जा रहा है। बहुत अच्छा, हुह?

दूसरे, जब कोई रिएक्ट घटक फिर से प्रस्तुत किया जाता है, तो यह children रूप में पारित सामग्री को फिर से प्रस्तुत नहीं करता है ।

 function Parent({ children }) { const [count, setCount] = React.useState(0) console.count('Parent') return ( <div> <button type="button" onClick={() => { setCount(count => count + 1) }}> Force re-render </button> {children} </div> ) } function Child() { console.count('Child') return <div /> } function App() { return ( <Parent> <Child /> </Parent> ) } 

बटन पर कुछ क्लिक करने के बाद, आपको कंसोल में निम्न सामग्री देखनी चाहिए:

 Parent: 1 Child: 1 Parent: 2 Parent: 3 Parent: 4 

ध्यान रखें कि आपके एप्लिकेशन के प्रदर्शन को बेहतर बनाने के लिए यह अक्सर अनदेखा तरीका है।

अब जब हम तैयार हैं, तो आइए अपने एप्लिकेशन का कंकाल बनाएं:

 import React from 'react' function Button() { console.count('Button') return ( <button type="button"> Fetch dad joke </button> ) } function DadJoke() { console.count('DadJoke') return ( <p>Fetched dad joke</p> ) } function App() { console.count('App') return ( <div> <Button /> <DadJoke /> </div> ) } export default App 

Button को एक एक्शन जनरेटर (लगभग एक्शन क्रिएटर) प्राप्त करना चाहिए। अनुवाद रूसी में Redux प्रलेखन से लिया गया है) जिसे एक मजाक मिलेगा। DadJoke को राज्य DadJoke चाहिए, और App प्रदाता के संदर्भ का उपयोग करके दोनों घटकों App प्रदर्शित App ।

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

तो, एक फाइल बनाएं और इसे contexts/dad-joke.js ।

 import React from 'react' const DadJokeContext = React.createContext() export function DadJokeContextProvider({ children }) { const state = { dadJoke: null } const actions = { fetchDadJoke: () => {}, } return ( <DadJokeContext.Provider value={{ state, actions }}> {children} </DadJokeContext.Provider> ) } 

हम संदर्भ से मूल्य प्राप्त करने के लिए 2 हुक भी निर्यात करते हैं।

 export function useDadJokeState() { return React.useContext(DadJokeContext).state } export function useDadJokeActions() { return React.useContext(DadJokeContext).actions } 

अब हम इसे लागू कर सकते हैं:

 import React from 'react' import { DadJokeProvider, useDadJokeState, useDadJokeActions, } from './contexts/dad-joke' function Button() { const { fetchDadJoke } = useDadJokeActions() console.count('Button') return ( <button type="button" onClick={fetchDadJoke}> Fetch dad joke </button> ) } function DadJoke() { const { dadJoke } = useDadJokeState() console.count('DadJoke') return ( <p>{dadJoke}</p> ) } function App() { console.count('App') return ( <DadJokeProvider> <Button /> <DadJoke /> </DadJokeProvider> ) } export default App 

यहाँ! एपीआई के लिए धन्यवाद हमने हुक का उपयोग किया। हम अब पूरे पोस्ट में इस फाइल में कोई बदलाव नहीं करेंगे।

चलिए DadJokeProvider की स्थिति से शुरू करते हुए, अपनी संदर्भ फ़ाइल में कार्यक्षमता जोड़ना शुरू करते हैं। हाँ, हम सिर्फ useState हुक का उपयोग कर सकते हैं, लेकिन आइए इसके बजाय हमारे राज्य को फिर से useState करें और हमारे लिए अच्छी तरह से ज्ञात और प्रिय Redux कार्यक्षमता को जोड़कर।

 function reducer(state, action) { switch (action.type) { case 'SET_DAD_JOKE': return { ...state, dadJoke: action.payload, } default: return new Error(); } } 

अब हम इस useReducer को useReducer हुक से पास कर सकते हैं और एपीआई के साथ मजाक कर सकते हैं:

 export function DadJokeProvider({ children }) { const [state, dispatch] = React.useReducer(reducer, { dadJoke: null }) async function fetchDadJoke() { const response = await fetch('https://icanhazdadjoke.com', { headers: { accept: 'application/json', }, }) const data = await response.json() dispatch({ type: 'SET_DAD_JOKE', payload: data.joke, }) } const actions = { fetchDadJoke, } return ( <DadJokeContext.Provider value={{ state, actions }}> {children} </DadJokeContext.Provider> ) } 

काम करना चाहिए! बटन पर क्लिक करें और प्राप्त चुटकुले प्रदर्शित करना चाहिए!

चलो कंसोल की जाँच करें:

 App: 1 Button: 1 DadJoke: 1 Button: 2 DadJoke: 2 Button: 3 DadJoke: 3 

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

और यहां हम सापेक्ष समानता के क्षेत्र में प्रवेश करते हैं, इसलिए एक छोटा सा अनुस्मारक:

 const obj = {} //       console.log(obj === obj) // true //        //  2   console.log({} === {}) // false 

एक घटक जो संदर्भ का उपयोग करता है उसे इस संदर्भ के मूल्य में हर बार फिर से प्रदान किया जाएगा। आइए हमारे संदर्भ प्रदाता के अर्थ को देखें:

 <DadJokeContext.Provider value={{ state, actions }}> 

यहां हम प्रत्येक रेंडरर के दौरान एक नई ऑब्जेक्ट बनाते हैं, लेकिन यह अपरिहार्य है, क्योंकि हर बार जब हम कोई एक्शन ( dispatch ) करते हैं, तो एक नई ऑब्जेक्ट बनाई जाएगी, इसलिए इस मान को कैश करना ( memoize ) असंभव है।

और यह सब कहानी के अंत की तरह दिखता है, है ना?

अगर हम fetchDadJoke फ़ंक्शन को fetchDadJoke हैं, तो बाहरी दायरे से इसे उपयोग करने वाली एकमात्र चीज़ dispatch , है ना? सामान्य तौर पर, मैं आपको useReducer और useState में बनाए गए कार्यों के बारे में थोड़ा रहस्य बताने जा रहा हूं। संक्षिप्तता के लिए, मैं एक उदाहरण के रूप में उपयोग useState :

 let prevSetCount function Counter() { const [count, setCount] = React.useState() if (typeof prevSetCount !== 'undefined') { console.log(setCount === prevSetCount) } prevSetCount = setCount return ( <button type="button" onClick={() => { setCount(count => count + 1) }}> Increment </button> ) } 

कई बार बटन पर क्लिक करें और कंसोल देखें:

 true true true 

आप देखेंगे कि setCount प्रत्येक रेंडर के लिए एक ही फ़ंक्शन है। यह हमारे dispatch समारोह पर भी लागू होता है।

इसका अर्थ है कि हमारा fetchDadJoke फ़ंक्शन fetchDadJoke भी चीज़ पर निर्भर नहीं करता है जो समय के साथ बदलता है, और किसी भी अन्य एक्शन जनरेटर पर निर्भर नहीं करता है, इसलिए एक्शन ऑब्जेक्ट को केवल एक बार, पहले रेंडर पर बनाने की आवश्यकता है:

 const actions = React.useMemo(() => ({ fetchDadJoke, }), []) 

अब जब हमारे पास कार्यों के साथ एक कैश्ड वस्तु है, तो क्या हम संदर्भ मूल्य को अनुकूलित कर सकते हैं? वास्तव में, नहीं, क्योंकि कोई फर्क नहीं पड़ता कि हम मूल्य वस्तु को कितनी अच्छी तरह से अनुकूलित करते हैं, फिर भी हमें राज्य परिवर्तनों के कारण हर बार एक नया निर्माण करना होगा। हालाँकि, क्या होगा यदि हम एक मौजूदा संदर्भ से एक नई वस्तु पर कार्रवाई करते हैं? किसने कहा कि हमारे पास केवल एक संदर्भ हो सकता है?

 const DadJokeStateContext = React.createContext() const DadJokeActionsContext = React.createContext() 

हम अपने DadJokeProvider में दोनों संदर्भों को जोड़ सकते हैं:

  return ( <DadJokeStateContext.Provider value={state}> <DadJokeActionsContext.Provider value={actions}> {children} </DadJokeActionsContext.Provider> </DadJokeStateContext.Provider> ) 

और हमारे हुक ट्वीक करें:

 export function useDadJokeState() { return React.useContext(DadJokeStateContext) } export function useDadJokeActions() { return React.useContext(DadJokeActionsContext) } 

और हम कर रहे हैं! गंभीरता से, जितने चाहें चुटकुले डाउनलोड करें और अपने लिए देखें।

 App: 1 Button: 1 DadJoke: 1 DadJoke: 2 DadJoke: 3 DadJoke: 4 DadJoke: 5 

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

अपनी कल्पना की समीक्षा करें और समीक्षा करें कि आपको वास्तव में Redux आवश्यकता क्यों है।

दो-संदर्भ टेम्पलेट पर लेखों के लिए केंट सी। डोड्स का धन्यवाद। मैंने उसे कहीं और नहीं देखा और मुझे ऐसा लगता है कि इससे खेल के नियम बदल गए हैं।

मैंने जिन अवधारणाओं के बारे में बात की है, उनके बारे में अधिक जानकारी के लिए निम्नलिखित केंट ब्लॉग पोस्ट पढ़ें:

कब का उपयोग करें और मेमो का उपयोग करें
संदर्भ मूल्य का अनुकूलन कैसे करें
प्रभावी रूप से रिएक्ट संदर्भ का उपयोग कैसे करें
प्रतिक्रिया में अनुप्रयोग राज्य का प्रबंधन।
प्रतिक्रिया में पुन: रेंडरिंग का अनुकूलन करने के लिए एक सरल चाल