রেডাক্স @ সংযোগ ডেকরেটারে '@' (প্রতীকটিতে) কী?

Question

আমি রেডাক্সের সাথে প্রতিক্রিয়া শিখছি এবং এই কোডটিতে হোঁচট খেয়েছি। এটি রেডাক্স নির্দিষ্ট কিনা তা আমি নিশ্চিত নই , তবে উদাহরণগুলির মধ্যে একটিতে আমি নীচের কোড স্নিপেট দেখেছি।

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

যদিও এর কার্যকারিতা connectবেশ সোজা, তবে আমি এর @আগে বুঝতে পারি না connect। আমি ভুল না হলে এটি একটি জাভাস্ক্রিপ্ট অপারেটরও নয়।

কেউ কি দয়া করে ব্যাখ্যা করতে পারেন এটি কী এবং কেন এটি ব্যবহার করা হয়?

হালনাগাদ:

এটি আসলে একটি অংশ react-reduxযা একটি রেডাক্স স্টোরের সাথে একটি প্রতিক্রিয়া উপাদানকে সংযুক্ত করতে ব্যবহৃত হয়।

Comments

আমি রেডাক্সের সাথে পরিচিত নই, তবে এটি একটি সাজসজ্জার মতো দেখাচ্ছে। মাঝারি.com

— লি

আমি পছন্দ করি যে এই নতুন জাভাস্ক্রিপ্ট জগতে আপনি কীভাবে অর্ধেক সময়ের কোডটি দেখছেন এবং "ভাষার বাক্য গঠনের কোন অংশ এটি?"

— এমকে

হ্যাঁ, আমি এখন রিডুএক্স এবং স্টাফগুলির মধ্যে গভীর। তবে তারপরে আমি জানতাম না সাজসজ্জার সিনট্যাক্সের রিডুএক্সের কোনও সম্পর্ক নেই। এটি ঠিক জাভাস্ক্রিপ্ট। এই প্রশ্নটি দেখে আমার খুশী আমার মতো অনেক লোককে সহায়তা করছে। :)

— সালমান

স্পষ্টতই রেডুএক্স টিম এই মুহূর্তে ডিকরেটার

— সৈয়দ জাফরি

Answer 1

@প্রতীক আসলে একটি JavaScript অভিব্যক্তি বর্তমানে বোঝান প্রস্তাব টেকনিক :

সজ্জাকারীগণ নকশাকালীন সময়ে ক্লাস এবং বৈশিষ্ট্যগুলি বর্ননা এবং সংশোধন করা সম্ভব করে তোলে।

এখানে ডিকোরেটর ছাড়াই এবং তার সাথে রেডাক্স সেটআপ করার একটি উদাহরণ রয়েছে:

সাজসজ্জা ছাড়াই

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
}

উপরের দুটি উদাহরণই সমান, এটি কেবল পছন্দের বিষয়। এছাড়াও, ডেকোরেটর সিনট্যাক্সটি এখনও কোনও জাভাস্ক্রিপ্ট রানটাইমগুলিতে তৈরি করা হয়নি এবং এটি এখনও পরীক্ষামূলক এবং পরিবর্তনের সাপেক্ষে। আপনি যদি এটি ব্যবহার করতে চান তবে এটি ব্যাবেল ব্যবহার করে উপলব্ধ ।

Comments

এটা দুর্দান্ত

— svnm

একটি এমনকি ES6 সিনট্যাক্সের সাথে আরও ক্ষুদ্র হতে পারে। @ সংযোগ (রাষ্ট্র => {রিটার্ন {টোডস: state.todos};}, প্রেরণ => {রিটার্ন {ক্রিয়াকলাপ: bindActionCreators (অ্যাকশনক্রিয়াটর, প্রেরণ)};})

— লেসকিউসার

আপনি যদি সত্যিই টর্স হতে চান তবে আপনি ES6 এ অন্তর্নিহিত রিটার্ন ব্যবহার করতে পারেন। এটি নির্ভর করে আপনি কতটা সুস্পষ্ট হতে চান। @connect(state => ({todos: state.todos}), dispatch => ({actions: bindActionCreators(actionCreators, dispatch)}))

— ট্যানার সেমেরাড

ইউনিট পরীক্ষার জন্য আপনি কীভাবে সংযুক্ত সংযোগ রপ্তানি করবেন?

— টিম

বিক্রিয়া-নেভিগেশনের সাথে রিডেক্সের জন্য ডেকোরেটর ব্যবহার করা সমস্যাযুক্ত হতে পারে, বর্তমান সর্বাধিক অনুশীলন হ'ল সাজসজ্জারটি না করে ফাংশনটি ব্যবহার করা: github.com/react-commune/react-navication/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

বা নির্বাচিত বা পুনর্নির্মাণ বা ফাস্টমোমাইজের মতো নির্বাচকগুলি ব্যবহার করুন

— জুলিয়াস করোনসি

survivejs.com/react/appendices/understanding-decorators এবং sitepoint.com/javascript-decorators-what-they-are

— zloctb