Redux @connect डेकोरेटर में '@' (प्रतीक में) क्या है?

Question

मैं रिएक्ट के साथ Redux सीख रहा हूं और इस कोड पर ठोकर खाई हूं। मुझे यकीन नहीं है कि यह Redux विशिष्ट है या नहीं, लेकिन मैंने निम्न कोड स्निपेट को एक उदाहरण में देखा है।

@connect((state) => {
  return {
    key: state.a.b
  };
})

हालांकि की कार्यक्षमता connectबहुत सीधी है, लेकिन मैं @पहले नहीं समझता connect। अगर मैं गलत नहीं हूं तो यह जावास्क्रिप्ट ऑपरेटर भी नहीं है।

क्या कोई समझा सकता है कि यह क्या है और इसका उपयोग क्यों किया जाता है?

अपडेट करें:

यह वास्तव में एक हिस्सा है react-reduxजिसका उपयोग रिएक्ट स्टोर में एक रिएक्ट घटक को जोड़ने के लिए किया जाता है।

Comments

मैं Redux से परिचित नहीं हूँ, लेकिन यह एक डेकोरेटर की तरह दिखता है। medium.com/google-developers/…

— ली

मुझे यह पसंद है कि इस नई जावास्क्रिप्ट दुनिया में आप किस समय कोड के आधे भाग में घूर रहे हैं और सोच रहे हैं "यह भाषा सिंटैक्स का क्या हिस्सा है?"

— एम.के.

Lol, मैं अब Redux और सामान में गहराई से हूँ। लेकिन तब मुझे पता नहीं था कि डेकोरेटर सिंटैक्स का रिडक्स से कोई लेना-देना नहीं है। इसका सिर्फ जावास्क्रिप्ट। इस सवाल को देखकर खुशी हुई कि मेरे जैसे बहुत से लोग मदद कर रहे हैं। :)

— सलमान

जाहिर है redux टीम इस समय एक डेकोरेटर के रूप में कनेक्ट के उपयोग को हतोत्साहित github.com/happypoulp/redux-tutorial/issues/87

— सैयद जाफरी

Answer 1

@प्रतीक वास्तव में एक जावास्क्रिप्ट अभिव्यक्ति है वर्तमान में सूचित करने के लिए प्रस्तावित सज्जाकार :

सज्जाकार डिजाइन समय पर कक्षाओं और संपत्तियों को एनोटेट और संशोधित करना संभव बनाते हैं।

यहाँ एक सज्जाकार के साथ और बिना Redux की स्थापना का एक उदाहरण है:

बिना डेकोरेटर के

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

class MyApp extends React.Component {
  // ...define your main app here
}

export default connect(mapStateToProps, mapDispatchToProps)(MyApp);

डेकोरेटर का उपयोग करना

import React from 'react';
import * as actionCreators from './actionCreators';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

function mapStateToProps(state) {
  return { todos: state.todos };
}

function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) };
}

@connect(mapStateToProps, mapDispatchToProps)
export default class MyApp extends React.Component {
  // ...define your main app here
}

उपरोक्त दोनों उदाहरण समतुल्य हैं, यह केवल वरीयता की बात है। इसके अलावा, डेकोरेटर सिंटैक्स अभी तक किसी भी जावास्क्रिप्ट रनटाइम में नहीं बनाया गया है, और अभी भी प्रायोगिक और परिवर्तन के अधीन है। यदि आप इसका उपयोग करना चाहते हैं, तो यह Babel का उपयोग करके उपलब्ध है ।

Comments

यह कमाल है

— svnm

ES6 सिंटैक्स के साथ एक और भी अधिक terse हो सकता है। @connect (राज्य => {वापसी {todos: state.todos};}, डिस्पैच => {रिटर्न {क्रियाएँ: bindActionCreators (एक्शन क्रिटर्स, डिस्पैच)};})

— लेसक्यूल्सऑक्ट

यदि आप वास्तव में चाहते हैं कि आप ईएस 6 में निहित रिटर्न का उपयोग कर सकें। यह निर्भर करता है कि आप कितना स्पष्ट होना चाहते हैं। @connect(state => ({todos: state.todos}), dispatch => ({actions: bindActionCreators(actionCreators, dispatch)}))

— टान्नर सेमराद

आप यूनिट परीक्षण के लिए असंबद्ध घटक को कैसे निर्यात करेंगे?

— टिम

रिएक्टर-नेविगेशन के साथ रेडिएटर के लिए डेकोरेटर का उपयोग करना समस्याग्रस्त हो सकता है, वर्तमान सर्वोत्तम-अभ्यास फ़ंक्शन का उपयोग करना है न कि डेकोरेटर: github.com/react-community/react-navigation/issues/1180

— straya

Answer 2

बहोत महत्वपूर्ण!

इन प्रॉप्स को स्टेट प्रॉप्स कहा जाता है और वे सामान्य प्रॉप्स से अलग होते हैं, आपके कंपोनेंट स्टेट प्रॉप्स में कोई भी बदलाव कंपोनेंट रेंडर विधि को बार-बार ट्रिगर करेगा, भले ही आप इन प्रॉप्स का इस्तेमाल न करें परफॉर्मेंस रीजन्स के लिए केवल अपने कंपोनेंट को बाइंड करने की कोशिश करें राज्य प्रॉप्स जो आपको अपने घटक के अंदर चाहिए और यदि आप उप प्रॉप्स का उपयोग करते हैं तो केवल इन प्रॉप्स को बांधें।

उदाहरण: अपने घटक के अंदर आपको केवल दो प्रॉप्स की आवश्यकता होती है:

1. अंतिम संदेश
2. उपयोगकर्ता नाम

यह मत करो

@connect(state => ({ 
   user: state.user,
   messages: state.messages
}))

यह करो

@connect(state => ({ 
   user_name: state.user.name,
   last_message: state.messages[state.messages.length-1]
}))

Comments

या reselect या fastmemoize जैसे चयनकर्ताओं का उपयोग करें

— जूलियस कोरोनसी

Survjs.com/react/appendices/understanding-decorators और sitepoint.com/javascript-decorators-what-they-are

— zloctb