फन स्टेट मैनेजमेंट ह्यूक्स फ्रेमवर्क

परिचय

मुझे इस बात पर हमेशा आश्चर्य होता था कि फ्रेमवर्क के राज्य प्रबंधन के लिए आपको कितनी कार्रवाई करने की आवश्यकता है - तुरंत योजना का वर्णन करें, म्यूटेशन लिखें, उन्हें प्रतिबद्ध करें ... सब कुछ यथासंभव सरल क्यों न करें?)

जब आप इसे नहीं लिख सकते तो कोड क्यों लिखें?

(अद्यतन)
मैं आपके आधे घंटे के शिल्प को प्रस्तुत करता हूं - ह्यूक्स !

अब तक, समाधान केवल NodeJS प्लेटफॉर्म पर उपलब्ध है, लेकिन मुझे लगता है कि यह प्रस्तुति के लिए पर्याप्त होगा।

अस्वीकरण: ह्यूक्स केवल मनोरंजन और शैक्षिक उद्देश्यों के लिए मेरे द्वारा लिखा गया था और यह एक पूर्ण रूपरेखा होने का दावा नहीं करता है। और शायद यह दावा करता है। अब चलते हैं।

इसके लिए क्या है?

एक ही सुविधाजनक डेटा वेयरहाउस है। उनके परिवर्तनों की निगरानी करने में सक्षम हो। उसे "गेटर्स", "म्यूटेटर", "एक्शन", "कमिट", आदि जैसे समझ से बाहर शब्दों से छुटकारा मिलेगा।

इसे कैसे स्थापित करें?

अब तक, बस इस रिपॉजिटरी को कॉपी करके।
रिपॉजिटरी कॉपी होने के बाद, आपको इसे इस रूप में कहीं और अपनी परियोजना के पैकेज के माध्यम से कनेक्ट करने की आवश्यकता है:

"dependencies": { "huex": "file:../huex/" } 

उसके बाद, यह एक ह्यूक्स मॉड्यूल के रूप में उपलब्ध होगा।

या इसे और भी आसान बनाएं , क्योंकि सही ढंग से नोट किया गया है:
npm i -S https://github.com/vssenko/huex.git

इसका उपयोग कैसे करें?

जितना संभव हो उतना प्राकृतिक और सरल। चलो कोड के साथ तुरंत शुरू करते हैं:

 //  huex. const Huex = require('huex'); //  . const storage = Huex(); //     - . storage.on('change:a', (e) => console.log(`Property "a" was changed: ${e.value}`)); //      . storage.a = 5; 

और वह सब है। हमारे संग्रहण के क्षेत्र की किसी भी परिवर्तन \ सेटिंग पर दो ईवेंट बनाए जाएंगे: डेटा {कुंजी, मान} के साथ परिवर्तन और डेटा {मूल्य} के साथ कुंजी ।
(अद्यतन)
और नेस्टेड ऑब्जेक्ट और सरणियों के लिए, नेस्टेड ऑब्जेक्ट और पैरेंट दोनों के लिए ईवेंट बनाए जाएंगे।
किसी भी जटिलता की परियोजनाएं बनाने के लिए पर्याप्त है।

शायद कुछ और?

बेशक: आप जाने पर गहरी नेस्टेड फ़ील्ड बना सकते हैं, और कोई अपवाद नहीं बनाया जाएगा।

 const Huex = require('huex'); const storage = Huex(); storage.abcde = 5; 

और निश्चित रूप से, इवेंट हैंडलर को सभी नेस्टेड ऑब्जेक्ट्स पर लटका दिया जा सकता है।

(अद्यतन)

शायद कुछ और?

हाँ! अब ह्यूक्स न केवल सरल डेटा के साथ काम करता है, बल्कि वस्तुओं और सरणियों के साथ, उन्हें चलते-चलते ह्यूक्स रिपॉजिटरी में फिर से तैयार करता है!

  sut.subSut = { a: 5 }; sut.on('change:subSut', (e) => { console.log(e.key); // subSut console.log(e.value.a) // 10 console.log(e.nested); // { key: 'a', value: 10 } }); sut.subSut.a = 10; 

और भी उदाहरण परियोजना परीक्षणों में उपलब्ध हैं।

क्या पकड़ है?

यह सब जादू प्रॉक्सी के माध्यम से कार्यान्वित किया जाता है। यह सबसे तेज़ समाधान नहीं है, और सामान्य तौर पर वे उत्पादन में प्रॉक्सी कक्षा का उपयोग करने की अनुशंसा नहीं करते हैं।

(अपडेट)

निष्कर्ष

दो विकास चक्र (शाम) के लिए, जेएस समुदाय का एक और दिलचस्प ढांचा है।
ह्यूक्स क्या कर सकता है:

• ऑब्जेक्ट \ array से प्रारंभ किया गया
• सरल असाइनमेंट द्वारा मान सहेजें
• ट्रिगर घटनाओं जब एक वस्तु या एक सरणी के रूप में खुद को बदल रही है
• चलते-चलते, Huex रिपॉजिटरी में लिखी गई वस्तुओं / सरणियों को फिर से करें
• ऑब्जेक्ट फ़ील्ड या सरणी फ़ील्ड बदलते समय ट्रिगर इवेंट
• चलते-फिरते, खाली जगह को तब पैदा करते हैं, जब कोई भी नदारद क्षेत्र (एक विवादास्पद विशेषता, लेकिन बहुत अच्छा) तक पहुँचता है

क्या Huex नहीं जानता कि कैसे:

• जल्दी बनो :-) हालाँकि, जैसा कि ड्रैग 13 ने उल्लेख किया है, अभी भी प्रॉक्सी की गति की दिशा में प्रगति है, इसलिए अचानक यह दृष्टिकोण लोकप्रिय हो जाएगा।