मैं यह लेख इसलिए लिख रहा हूं क्योंकि मुझे अभी तक ऐसा कोई समाधान नहीं मिला है जो मेरे जैसा हो, इसलिए हो सकता है कि मेरा समाधान किसी और के लिए उपयोगी हो।  सामग्री की तालिका  कार्यान्वयन  कक्षाएं लागू करें  रिएक्ट हुक में स्टेट पैटर्न का उपयोग करें  पूरा कोड, ताकि आप कॉपी-पेस्ट कर सकें।  विस्तारित राज्य मशीन (त्रुटि स्थिति, कॉपी-पेस्ट करने योग्य HTML)  आरेख  कोड  यह किन समस्याओं का समाधान करता है?  यह लेख क्यों उपयोगी है?  कार्यान्वयन  हम स्टेट डिज़ाइन पैटर्न को उसी तरह लागू करते हैं जैसा कि रिफैक्टरिंग गुरु सुझाते हैं:  https://refactoring.guru/design-patterns/state  कक्षाएं लागू करें   class RoomState { #roomClient = null; #roomId = null; constructor(roomClient, roomId) { if (roomClient) { this.#roomClient = roomClient; } if (roomId) { this.roomId = roomId; } } set roomClient(roomClient) { if (roomClient) { this.#roomClient = roomClient; } } get roomClient() { return this.#roomClient; } set roomId(roomId) { if (roomId) { this.#roomId = roomId; } } get roomId() { return this.#roomId; } join(roomId) { throw new Error('Abstract method join(roomId).'); } leave() { throw new Error('Abstract method leave().'); } getStatusMessage() { throw new Error('Abstract method getStatusMessage().'); } } // ------------------------------------------------------------------------- class PingRoomState extends RoomState { join(roomId) { this.roomClient.setState(new PongRoomState(this.roomClient, roomId)); } leave() { const message = `Left Ping room ${this.roomId}`; this.roomClient.setState(new LeftRoomState(this.roomClient, message)); } getStatusMessage() { return `In the Ping room ${this.roomId}`; } } // ------------------------------------------------------------------------- class PongRoomState extends RoomState { join(roomId) { this.roomClient.setState(new PingRoomState(this.roomClient, roomId)); } leave() { const message = `Left Pong room ${this.roomId}`; this.roomClient.setState(new LeftRoomState(this.roomClient, message)); } getStatusMessage() { return `In the Pong room ${this.roomId}`; } } // ------------------------------------------------------------------------- class LeftRoomState extends RoomState { #previousRoom = null; constructor(roomClient, previousRoom) { super(roomClient); this.#previousRoom = previousRoom; } join(roomId) { this.roomClient.setState(new PingRoomState(this.roomClient, roomId)); } leave() { throw new Error(`Can't leave, no room assigned`); } getStatusMessage() { return `Not in any room (previously in ${this.#previousRoom})`; } }  यह हमारी अब तक की स्टेट मशीन है   React Hook में स्टेट पैटर्न का उपयोग करें  अगली समस्या: हम रिएक्ट के साथ संयोजन में क्लासेस का उपयोग कैसे करें?  अन्य आलेख वर्तमान स्थिति का नाम संग्रहीत करने के लिए   और स्ट्रिंग का उपयोग करते हैं; हम अपना कार्यान्वयन साफ़ रखना चाहते हैं। useEffect  यदि     फ़ंक्शन का संदर्भ है, तो वह स्थिति को संशोधित कर सकता है। roomClient setState  समस्याएँ:  यदि हम क्लास के साथ स्टेट को आरंभ करते हैं तो हम   पास नहीं कर सकते। setState  हम हुक से शून्य वापस नहीं करना चाहते हैं।  हम ऐसी नकली विधियाँ नहीं लौटाना चाहते जो हुक से कुछ भी न लौटाएँ।  समाधान यह है कि जैसे ही स्टेट आरंभ हो,   के ठीक नीचे   उपलब्ध करा दें। useState roomClient   function useRoomClient() { const [state, setState] = useState(new PingRoomState()); // State contains the class // Initialize once // We can do this thanks to the `set` and `get` methods on // `roomClient` property if (!state.roomClient) { state.roomClient = { setState }; } return state; }  पूरा कोड ताकि आप कॉपी-पेस्ट कर सकें   class RoomState { #roomClient = null; #roomId = null; constructor(roomClient, roomId) { if (roomClient) { this.#roomClient = roomClient; } if (roomId) { this.roomId = roomId; } } set roomClient(roomClient) { if (roomClient) { this.#roomClient = roomClient; } } get roomClient() { return this.#roomClient; } set roomId(roomId) { if (roomId) { this.#roomId = roomId; } } get roomId() { return this.#roomId; } join(roomId) { throw new Error('Abstract method join(roomId).'); } leave() { throw new Error('Abstract method leave().'); } getStatusMessage() { throw new Error('Abstract method getStatusMessage().'); } } // ------------------------------------------------------------------------- class PingRoomState extends RoomState { join(roomId) { this.roomClient.setState(new PongRoomState(this.roomClient, roomId)); } leave() { const message = `Left Ping room ${this.roomId}`; this.roomClient.setState(new LeftRoomState(this.roomClient, message)); } getStatusMessage() { return `In the Ping room ${this.roomId}`; } } // ------------------------------------------------------------------------- class PongRoomState extends RoomState { join(roomId) { this.roomClient.setState(new PingRoomState(this.roomClient, roomId)); } leave() { const message = `Left Pong room ${this.roomId}`; this.roomClient.setState(new LeftRoomState(this.roomClient, message)); } getStatusMessage() { return `In the Pong room ${this.roomId}`; } } // ------------------------------------------------------------------------- class LeftRoomState extends RoomState { #previousRoom = null; constructor(roomClient, previousRoom) { super(roomClient); this.#previousRoom = previousRoom; } join(roomId) { this.roomClient.setState(new PingRoomState(this.roomClient, roomId)); } leave() { throw new Error(`Can't leave, no room assigned`); } getStatusMessage() { return `Not in any room (previously in ${this.#previousRoom})`; } } function useRoomClient() { const [state, setState] = useState(new PingRoomState()); // State contains the class // Initialize once // We can do this thanks to the `set` and `get` methods on // `roomClient` property if (!state.roomClient) { state.roomClient = { setState }; } return state; }  विस्तारित स्टेट मशीन (त्रुटि स्टेट, कॉपी-पेस्ट करने योग्य HTML)  हम स्टेट मशीन का विस्तार करते हैं क्योंकि हम चाहते हैं कि अगर हम कमरे से बाहर निकलने की कोशिश करें तो हम   स्थिति में चले जाएँ, और इसका परिणाम गलत संचालन में होता है। यह हमें   कॉल करके स्टेटस संदेश प्रदर्शित करने की अनुमति देता है। Error getStatusMessage  आरेख   कोड   <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <div id="root"></div> <script src="https://cdn.jsdelivr.net/npm/react@18.3.1/umd/react.development.js"></script> <script src="https://cdn.jsdelivr.net/npm/react-dom@18.3.1/umd/react-dom.development.js"></script> <script> class RoomState { #roomClient = null; #roomId = null; constructor(roomClient, roomId) { if (roomClient) { this.#roomClient = roomClient; } if (roomId) { this.roomId = roomId; } } set roomClient(roomClient) { if (roomClient) { this.#roomClient = roomClient; } } get roomClient() { return this.#roomClient; } set roomId(roomId) { if (roomId) { this.#roomId = roomId; } } get roomId() { return this.#roomId; } join(roomId) { throw new Error('Abstract method join(roomId).'); } leave() { throw new Error('Abstract method leave().'); } getStatusMessage() { throw new Error('Abstract method getStatusMessage().'); } } // ------------------------------------------------------------------------- class PingRoomState extends RoomState { join(roomId) { this.roomClient.setState(new PongRoomState(this.roomClient, roomId)); } leave() { const message = `Left Ping room ${this.roomId}`; this.roomClient.setState(new LeftRoomState(this.roomClient, message)); } getStatusMessage() { return `In the Ping room ${this.roomId}`; } } // ------------------------------------------------------------------------- class PongRoomState extends RoomState { join(roomId) { this.roomClient.setState(new PingRoomState(this.roomClient, roomId)); } leave() { const message = `Left Pong room ${this.roomId}`; this.roomClient.setState(new LeftRoomState(this.roomClient, message)); } getStatusMessage() { return `In the Pong room ${this.roomId}`; } } // ------------------------------------------------------------------------- class LeftRoomState extends RoomState { #previousRoom = null; constructor(roomClient, previousRoom) { super(roomClient); this.#previousRoom = previousRoom; } join(roomId) { this.roomClient.setState(new PingRoomState(this.roomClient, roomId)); } leave() { // Extend to shift to error state this.roomClient.setState( new ErrorRoomState( this.roomClient, new Error(`Can't leave, no room assigned`), ), ); } getStatusMessage() { return `Not in any room (previously in ${this.#previousRoom})`; } } // Extend our state machine to hold one more state. class ErrorRoomState extends RoomState { #error = null; constructor(roomClient, error) { super(roomClient); this.#error = error; } join(roomId) { this.roomClient.setState(new PingRoomState(this.roomClient, roomId)); } leave() { // Do nothing... We can't move anywhere. We handled error. } getStatusMessage() { return `An error occurred. ${this.#error.message}`; } } const { useState } = React; function useRoomClient() { const [state, setState] = useState(new PingRoomState()); // State contains the class // Initialize once // We can do this thanks to the `set` and `get` methods on // `roomClient` property if (!state.roomClient) { state.roomClient = { setState }; } return state; } // ---------------------------------------------------------------------- // Usage example // ---------------------------------------------------------------------- const e = React.createElement; function useWithError(obj) {} function App() { const roomClient = useRoomClient(); return e( 'div', null, e('h1', null, 'Change room state'), e('p', null, `Status message: ${roomClient.getStatusMessage()}`), e( 'div', null, e('button', { onClick: () => roomClient.join('a') }, 'Join'), e('button', { onClick: () => roomClient.leave() }, 'Leave'), ), ); } const { createRoot } = ReactDOM; const root = document.getElementById('root'); createRoot(root).render(React.createElement(App)); </script> </body> </html>  यह किन समस्याओं का समाधान करता है?  हम मौजूदा कोड को संशोधित किए बिना स्टेट मशीन को स्केल कर सकते हैं।  कम कीड़े.  एक बार हम समझ जाएं कि यह कैसे काम करता है, तो यह कोड अधिक समझने योग्य हो जाएगा   । (हमें बस एक नए राज्य के लिए एक नया वर्ग जोड़ना होगा)  जटिल if-else ब्लॉक, जटिल स्टेट म्यूटेशन और एक स्विच स्टेटमेंट से बचें।  यह अच्छा है यदि आप वेबसॉकेट का उपयोग करके वास्तविक समय के कमरे बनाना चाहते हैं  (हम उपयोगकर्ता कक्ष कनेक्शन स्थिति और अन्य प्रकार की स्थितियों की निगरानी कर सकते हैं)।  यह लेख क्यों सार्थक है  जब मैंने गूगल पर   खोजा तो ये मेरे पहले परिणाम थे state design pattern 3 परिणामों के लिंक:   https://refactoring.guru/design-patterns/state   https://en.wikipedia.org/wiki/State_pattern   https://www.geeksforgeeks.org/state-design-pattern/   https://medium.com/@udaykale/evolving-the-state-design-pattern-e6682a866fdd    खोजने पर ऐसे कार्यान्वयन मिलते हैं जो   पर कार्यान्वयन की तरह बिल्कुल भी नहीं दिखते हैं react state design pattern https://refactoring.guru/design-patterns/state खोज के परिणामों के लिए लिंक:   https://medium.com/@yah.emam/state-design-pattern-using-react-hooks-c535e1daa6f1   https://blog.logrocket.com/modern-guide-react-state-patterns/   https://github.com/themithy/react-design-patterns/blob/master/doc/state-pattern.md   https://refine.dev/blog/react-design-patterns/   https://react.dev/learn/choosing-the-state-structure

Read My Stories

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Make resilience your competitive advantage

जावास्क्रिप्ट में स्टेट डिज़ाइन पैटर्न को कैसे लागू करें और इसे रिएक्ट हुक्स के साथ कैसे एकीकृत करें

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

He/Him/Master of Discovery

इन 18 डेवलपर टूल के साथ अपनी उत्पादकता बढ़ाएँ 🚀🔥

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

क्लाउड सॉनेट 3.5 सिस्टम प्रॉम्प्ट लीक: एक फोरेंसिक विश्लेषण

He/Him/Master of Discovery

इन 18 डेवलपर टूल के साथ अपनी उत्पादकता बढ़ाएँ 🚀🔥

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

क्लाउड सॉनेट 3.5 सिस्टम प्रॉम्प्ट लीक: एक फोरेंसिक विश्लेषण

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps