Redux: तो html5 कैनवास के साथ redux डील का उपयोग कैसे करें

को निर्मित 21 जुल॰ 2015 · 3टिप्पणियाँ · स्रोत: reduxjs/redux

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

तो मेरी समस्या यह है: इस परिदृश्य में, स्पष्ट रूप से राज्य कैनवास प्रस्तुत करने के लिए बहुत उपयोगी नहीं होगा क्योंकि यह संदर्भ को चित्रित करने का काम है। हालांकि, कैनवास में अभी भी इसकी "स्थिति" है, जो इसका लेआउट पैरामीटर है, लेकिन मैं नहीं चाहता कि एक बार state.layout बदल जाने के बाद प्रतिक्रिया HTML कैनवास तत्व को रीफ्रेश करे क्योंकि जैसा कि मैंने कहा, यह ड्राइंग का काम है संदर्भ (और अगर मैं ऐसा करता हूं तो मैं एनीमेशन खो देता हूं, क्योंकि यह HTML तत्व का पुन: प्रतिपादन है, कैनवास नहीं)। इसलिए, केवल एक चीज जो मुझे यहां चाहिए वह है क्रियाओं के माध्यम से घटकों के बीच प्रेषण।

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

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

क्या आप कृपया मुझे मदद करने के लिए कुछ सुझाव या छोटा कोड स्निपेट देंगे? या अगर आपको लगता है कि ऊपर बताए गए प्रोजेक्ट में Redux का उपयोग करना उचित नहीं है, तो कृपया मुझे वह भी बताएं।

बहुत - बहुत धन्यवाद!

PS मैंने आपका वीडियो youtube पर देखा (उस प्रतिक्रिया हॉट लोडर + Redux भाषण के संबंध में)। प्रतिभाशाली।

question

स्रोत

rui-ktei

👍1

सबसे उपयोगी टिप्पणी

अगर मैं आपको सही ढंग से समझता हूं, तो यह अनिवार्य रूप से वही समस्या है जो मैंने हाल ही में डी 3 को रिएक्ट के साथ एकीकृत करने में आई थी। मुझे प्रारंभिक <svg> टैग बनाने और अपना राज्य प्रस्तुत करने की आवश्यकता थी, और फिर जैसे ही राज्य बदल गया, d3 एनिमेशन शुरू करें, नए तत्व जोड़ें, तत्वों को हटा दें, आदि।

यह स्टैक ओवरफ्लो लेख इस बात का स्पष्टीकरण प्रदान करता है कि पहली बार अपने <svg> तत्व को प्रस्तुत करने के लिए रिएक्ट कैसे प्राप्त करें (या आपके मामले में <canvas> , और फिर रिएक्ट को अपनी गंदी छोटी उंगलियों को इससे दूर रखें, जबकि जब भी राज्य बदलता है तब भी आपको चीजों को फिर से तैयार करने का मौका देता है:

यहाँ लेख से कोड है:

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

ध्यान देने योग्य बात यह है कि shouldComponentUpdate() हमेशा false लौटाता है, इसलिए रिएक्ट प्रारंभिक रेंडर के बाद DOM के उस हिस्से को कभी नहीं छूएगा।

आप अपने रेंडरिंग कोड पर कॉल के साथ d3 कॉल को केवल प्रतिस्थापित करने में सक्षम होना चाहिए।

mindjuice 23 जुल॰ 2015

👍4

सभी 3 टिप्पणियाँ

यहाँ लेख से कोड है:

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

mindjuice 23 जुल॰ 2015

👍4

@mindjuice बहुत बहुत धन्यवाद। इससे मुझे निश्चित रूप से मदद मिली। वैसे, मैं इस प्रश्न का लेखक रुई-इन्फोट्रैक हूं। मैं पहले कंपनी के खाते का उपयोग कर रहा था...

ktei 23 जुल॰ 2015

मैं बंद कर रहा हूं, अगर आपको Redux के बारे में और जानकारी चाहिए तो मुझे बताएं।

gaearon 31 जुल॰ 2015

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Redux: तो html5 कैनवास के साथ redux डील का उपयोग कैसे करें

सबसे उपयोगी टिप्पणी

सभी 3 टिप्पणियाँ

संबंधित मुद्दों