मुझे पता है कि Redux फ्लक्स का एक बेहतर "कार्यान्वयन" है, या बेहतर है कि यह चीजों को सरल बनाने के लिए एक नया स्वरूप है (एप्लिकेशन राज्य प्रबंधन)।
मैंने प्रतिक्रियात्मक प्रोग्रामिंग (आरएक्सजेएस) के बारे में बहुत कुछ सुना है, लेकिन मैंने अभी तक इसे सीखने की हिम्मत नहीं की है।
तो मेरा सवाल यह है कि क्या इस दो तकनीकों के बीच कोई चौराहा (कुछ भी सामान्य) है या वे पूरक हैं? ... या बिलकुल अलग?
जवाबों:
संक्षेप में, वे बहुत अलग उद्देश्यों के लिए बहुत अलग पुस्तकालय हैं, लेकिन हां कुछ अस्पष्ट समानताएं हैं।
Redux पूरे एप्लिकेशन को प्रबंधित करने के लिए एक उपकरण है। यह आमतौर पर यूआई के लिए एक वास्तुकला के रूप में उपयोग किया जाता है। इसे (आधा) कोणीय के विकल्प के रूप में सोचें।
RxJS एक प्रतिक्रियाशील प्रोग्रामिंग लाइब्रेरी है। यह आमतौर पर जावास्क्रिप्ट में अतुल्यकालिक कार्यों को पूरा करने के लिए एक उपकरण के रूप में उपयोग किया जाता है। इसे प्रोमिस के विकल्प के रूप में सोचें।
रिएक्टिव प्रोग्रामिंग एक प्रतिमान (काम करने और सोचने का तरीका) है जहां डेटा परिवर्तन दूर से देखे जाते हैं । डेटा को दूर से नहीं बदला जाता है ।
यहाँ दूर से परिवर्तित का एक उदाहरण है :
// In the controller.js file
model.set('name', 'George');मॉडल बदल गया है नियंत्रक से।
यहाँ दूर से देखा गया एक उदाहरण है :
// logger.js
store.subscribe(function (data) {
console.log(data);
});लकड़हारे में, हम स्टोर (दूर से) में होने वाले डेटा परिवर्तनों का अवलोकन करते हैं, और कंसोल पर लिखते हैं।
Redux प्रतिक्रियाशील प्रतिमान का उपयोग थोड़े ही करता है: स्टोर प्रतिक्रियाशील है। आप इसकी सामग्री को दूर से सेट नहीं करते हैं। इसलिए store.set()Redux में नहीं है। स्टोर दूर से ही क्रियाओं को देखता है, और स्वयं को बदलता है। और स्टोर दूसरों को अपने डेटा को दूर से देखने की अनुमति देता है।
RxJS भी रिएक्टिव प्रतिमान का उपयोग करता है, लेकिन इसके बजाय एक वास्तुकला होने का, तो यह आपको बुनियादी निर्माण घटक, देता observables , इस "दूर से देख कर" पैटर्न पूरा करने के लिए।
निष्कर्ष निकालने के लिए, विभिन्न उद्देश्यों के लिए बहुत अलग चीजें, लेकिन कुछ विचारों को साझा करें।
वे बहुत अलग चीजें हैं।
RxJS का उपयोग रिएक्टिव प्रोग्रामिंग करने के लिए किया जा सकता है और यह 250+ ऑपरेटरों के साथ एक बहुत गहन पुस्तकालय है।
और Redux github रेपो पर वर्णित है "Redux जावास्क्रिप्ट ऐप्स के लिए एक पूर्वानुमानित राज्य कंटेनर है"।
Redux एप्स में राज्य को संभालने के लिए सिर्फ एक उपकरण है। लेकिन तुलना में आप सिर्फ RxJS में एक पूर्ण ऐप बना सकते हैं।
उम्मीद है की यह मदद करेगा :)
Redux एक राज्य प्रबंधन पुस्तकालय है जो अद्यतन परिचालनों के लिए अच्छी तरह से परिभाषित मानकों के साथ आता है। जहाँ तक आप मानकों से चिपके रहते हैं, आप अपने डेटा प्रवाह को सरल और तर्क के लिए आसान रख सकते हैं। यह बिचौलियों और स्टोर एन्हांसर्स के साथ डेटा प्रवाह को बढ़ाने की क्षमता भी लाता है।
RxJS प्रतिक्रियाशील प्रोग्रामिंग के लिए एक टूलकिट है। आप वास्तव में एक स्ट्रीम के रूप में अपने ऐप में होने वाली हर चीज के बारे में सोच सकते हैं। RxJS उन धाराओं को प्रबंधित करने के लिए एक बहुत ही समृद्ध उपकरण सेट करता है।
RxJS और Redux ने कहां इंटरसेप्ट किया? Redux में आप अपने राज्य को क्रियाओं के साथ अपडेट करते हैं और जाहिर है कि इन क्रियाओं को धाराओं के रूप में माना जा सकता है। Redux-observable (आपके पास नहीं है) जैसे मिडिलवेयर का उपयोग करके आप अपने तथाकथित "बिजनेस लॉजिक" को प्रतिक्रियात्मक तरीके से लागू कर सकते हैं। एक और बात यह है कि आप अपने redux स्टोर से एक अवलोकन कर सकते हैं जो कभी-कभी एक बढ़ाने वाले का उपयोग करने की तुलना में आसान हो सकता है।
इसे संक्षेप में रखने के लिए:
Redux: फ्लक्स प्रेरित लाइब्रेरी जिसका इस्तेमाल राज्य प्रबंधन के लिए किया जाता है ।
RxJS: यह प्रतिक्रियाशील प्रोग्रामिंग दर्शन पर आधारित एक और जावास्क्रिप्ट लाइब्रेरी है, जिसका उपयोग "स्ट्रीम" (वेधशाला, आदि) से निपटने के लिए किया जाता है [स्ट्रीम अवधारणाओं को समझने के लिए प्रतिक्रियाशील प्रोग्रामिंग के बारे में पढ़ें]।
जब मैंने Redux से प्रेरित RxJS- कोड किया तो मैं कुछ व्यावहारिक अंतर जोड़ना चाहता था।
मैंने प्रत्येक एक्शन टाइप को सब्जेक्ट इंस्टेंस पर मैप किया। प्रत्येक स्टेटफुल कंपोनेंट में एक सब्जेक्ट होगा, जिसे बाद में रिड्यूसर फंक्शन में मैप किया जाएगा। सभी रिड्यूसर धाराएँ संयुक्त हैं mergeऔर फिर scanराज्य को आउटपुट करती हैं। डिफ़ॉल्ट मान के startWithठीक पहले सेट किया गया है scan। मैं publishReplay(1)राज्यों के लिए इस्तेमाल करता था , लेकिन बाद में इसे हटा सकता था।
प्रतिक्रिया शुद्ध रेंडर फ़ंक्शन केवल उस स्थान पर होगा जहां आप सभी उत्पादकों / विषयों में भेजकर इवेंट डेटा का उत्पादन करेंगे।
यदि आपके पास बाल घटक हैं, तो आपको यह वर्णन करने की आवश्यकता है कि उन राज्यों को आपके साथ कैसे जोड़ा जाता है। combineLatestउस के लिए एक अच्छा प्रारंभिक बिंदु हो सकता है।
कार्यान्वयन में उल्लेखनीय अंतर:
कोई मिडलवेयर नहीं, बस आरएक्सजे ऑपरेटर। मुझे लगता है कि यह सबसे बड़ी शक्ति और कमजोरी है। आप अभी भी अवधारणाओं को उधार ले सकते हैं, लेकिन मुझे Redux और cycle.js जैसे बहन समुदायों की मदद लेना मुश्किल है क्योंकि यह अभी तक एक और कस्टम समाधान है। इसलिए मुझे इस पाठ में "हम" के बजाय "मैं" लिखना होगा।
कार्रवाई प्रकारों के लिए कोई स्विच / केस या तार नहीं। आपके पास क्रियाओं को अलग करने का एक अधिक गतिशील तरीका है।
rxjs को एक उपकरण के रूप में कहीं और इस्तेमाल किया जा सकता है, और यह राज्य प्रबंधन के लिए निहित नहीं है।
कार्रवाई प्रकार (?) की तुलना में उत्पादकों की कम संख्या। मुझे इस बारे में निश्चित नहीं है, लेकिन आपके पास माता-पिता के घटकों में कई प्रतिक्रियाएं हो सकती हैं जो बाल घटकों को सुनती हैं। इसका मतलब है कि कम जरूरी कोड, और कम जटिलता।
आप समाधान के मालिक हैं। किसी ढांचे की जरूरत नहीं। अच्छा और बुरा। आप किसी भी तरह से अपनी खुद की रूपरेखा लिखना समाप्त कर देंगे।
यह बहुत अधिक भग्न है, और आप आसानी से उप-ट्री, या ऐप स्टेट ट्री के कई हिस्सों से परिवर्तन की सदस्यता ले सकते हैं।
मैं बहुत बड़े लाभों पर भी काम कर रहा हूं जहां बाल घटकों को धाराओं के रूप में वर्णित किया गया है। इसका मतलब यह है कि हमें रिड्यूसर्स में माता-पिता और बच्चे की स्थिति को संकलित करने की आवश्यकता नहीं है, क्योंकि हम घटक संरचना के आधार पर राज्यों को सिर्फ ("बस") पुन: संयोजित कर सकते हैं।
मैं भी प्रतिक्रिया लंघन के बारे में सोचता हूं और जब तक प्रतिक्रिया प्रतिक्रियाशील राज्यों को बेहतर ढंग से संभालती है, तब तक स्नैबडोम या कुछ और के साथ जाएं। हम अपने राज्य को ऊपर की ओर क्यों बनाएं ताकि इसे फिर से सहारा के माध्यम से विभाजित किया जा सके? इसलिए मैं Snabbdom के साथ इस पैटर्न का एक संस्करण 2 बनाने की कोशिश करूंगा।
यहाँ एक और अधिक उन्नत लेकिन छोटा स्निपेट है जहाँ स्टेट स्ट्रीम फ़ाइल स्टेट स्ट्रीम बनाता है। यह अजाक्स-प्रपत्र घटक की स्थिति है जिसे सत्यापन नियमों और सीएसएस शैलियों के साथ फ़ील्ड्स (इनपुट्स) का एक ऑब्जेक्ट मिलता है। इस फाइल में हम सभी बच्चों के राज्यों को फॉर्म स्टेट में मिलाने के लिए सिर्फ फील्ड नेम (ऑब्जेक्ट की) का उपयोग करते हैं।
export default function create({
Observable,
ajaxInputs
}) {
const fieldStreams = Object.keys(ajaxInputs)
.map(function onMap(fieldName) {
return ajaxInputs[fieldName].state.stream
.map(function onMap(stateData) {
return {stateData, fieldName}
})
})
const stateStream = Observable.combineLatest(...fieldStreams)
.map(function onMap(fieldStreamDataArray) {
return fieldStreamDataArray.reduce(function onReduce(acc, fieldStreamData) {
acc[fieldStreamData.fieldName] = fieldStreamData.stateData
return acc
}, {})
})
return {
stream: stateStream
}
}हालांकि कोड अलगाव में बहुत कुछ नहीं कह सकता है, यह दर्शाता है कि आप राज्य को ऊपर की ओर कैसे बना सकते हैं, और आप आसानी से गतिशील घटनाओं का उत्पादन कैसे कर सकते हैं। भुगतान करने की कीमत यह है कि आपको कोड की एक अलग शैली को समझने की आवश्यकता है। और मुझे वह कीमत चुकानी पड़ी।