প্রতিক্রিয়া-রেডাক্স: সমস্ত উপাদান রাজ্যগুলি রেডাক্স স্টোরে রাখা উচিত


90

বলুন আমার কাছে একটি সরল টগল রয়েছে:

আমি যখন বোতামটি ক্লিক করি তখন রঙের উপাদানটি লাল এবং নীল রঙের মধ্যে পরিবর্তিত হয়

আমি এরকম কিছু করে এই ফলাফলটি অর্জন করতে পারি।

index.js

Button: onClick={()=>{dispatch(changeColor())}}
Color: this.props.color ? blue : red

ধারক.জেএস

connect(mapStateToProps)(indexPage)

ক্রিয়া_স্রষ্টা.জেএস

function changeColor(){
 return {type: 'CHANGE_COLOR'}
}

হ্রাস .js

switch(){
case 'CHANGE_COLOR':
return {color: true}

তবে আমি jQuery, কিছু ক্লাস, এবং কিছু CSS এর সাহায্যে 5 সেকেন্ডে অর্জন করতে পারতাম এমন কিছু লেখার জন্য প্রচুর কোডের নরক!

সুতরাং আমি অনুমান করি যে আমি সত্যিই জিজ্ঞাসা করছি, আমি এখানে কি ভুল করছি?


7
প্রতিক্রিয়া-রিডাক্স এমন কিছু হিসাবে বিক্রি হয় না যা jquery এর চেয়ে ছোট। এটি আনতে এবং চলতে অবশ্যই কিছু কোড দরকার।
zerkms

উত্তর:


161

রেডাক্স মূলত "অ্যাপ্লিকেশন স্টেট" এর জন্য উদ্দিষ্ট। এটি হ'ল আপনার অ্যাপ্লিকেশন যুক্তির সাথে সম্পর্কিত anything এর উপরে নির্মিত ভিউটি সেই রাজ্যের প্রতিবিম্ব, তবে সমস্ত কিছু করার জন্য সেই রাষ্ট্রীয় ধারককে একচেটিয়াভাবে ব্যবহার করতে হবে না।

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

আপনার বিশেষ উদাহরণে, অ্যাপ্লিকেশনের অন্যান্য অংশে কোনও পার্থক্যের জন্য রঙটি বাটনটি কী টগল করা হয়? এটি যদি আপনার অ্যাপ্লিকেশনের একটি বড় অংশের জন্য টগল করে কিছুটা বৈশ্বিক থাকে তবে তা অবশ্যই স্টোরের মধ্যে। আপনি যদি বোতামটি ক্লিক করেন তবে আপনি যদি কেবল একটি বোতামের রঙ টগল করেন তবে আপনি স্থানীয়ভাবে সংজ্ঞায়িত রঙের অবস্থাটি ছেড়ে যেতে পারেন। বোতামটি ক্লিক করার ক্রিয়াতে অন্যান্য প্রভাব থাকতে পারে যার জন্য অ্যাকশন প্রেরণের প্রয়োজন হয়, তবে এটি কোন রঙের হবে তা সাধারণ প্রশ্ন থেকে পৃথক।

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


আরে, আমি জানি এই প্রশ্নের কোনও সঠিক উত্তর কখনই পাওয়া যাবে না, তবে আমি মনে করি যে এখানে আপনার যুক্তিটি খুব সুন্দর
l2silver

আইএমও, এটি সঠিক উত্তর নয়। এটা নির্ভর করে. ইউআই রাজ্যটিকে বিক্রিয়া অবস্থায় সংরক্ষণ করা রিডাক্স স্টোরকে পরিষ্কার করে দেবে তবে এটি অ-কার্যকরী উপাদানটি শেষ করবে যা পরীক্ষা করা শক্ত। ইউআই রাজ্যটিকে বিক্রিয়া অবস্থায় সংরক্ষণ করার সময় দেবের উপর প্রচুর প্রচেষ্টা যুক্ত হবে, কারণ আমাদের অতিরিক্ত হ্রাসকারী লিখতে হবে। তবে, এমন অনেকগুলি প্যাকেজ রয়েছে যা আপনি আপনার ইউআই রাজ্যকে রিডুক্স স্টোর করতে আরও সহজ করতে সহায়তা করতে পারেন, আরও তথ্যের জন্য Redx.js.org/docs/faq/OrganizingState.html চেক করুন।
রন ২

21

রেডাক্স এফএকিউ:
রিডাক্স অফিসিয়াল ডকের এই অংশটি সংগঠিত করে আপনার প্রশ্নের উত্তরটি ভালভাবে দিয়েছিল।

স্থানীয় উপাদান রাষ্ট্র ব্যবহার করা ভাল । একজন বিকাশকারী হিসাবে, কোন ধরণের রাজ্য আপনার অ্যাপ্লিকেশন তৈরি করে এবং রাষ্ট্রের প্রতিটি অংশ কোথায় বাস করতে হবে তা নির্ধারণ করা আপনার কাজ। আপনার জন্য কাজ করে এমন একটি ভারসাম্য খুঁজুন এবং এটির সাথে যান go

কোন ধরণের ডেটা রেডাক্সে রাখা উচিত তা নির্ধারণের জন্য থাম্বের কয়েকটি সাধারণ নিয়ম:

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

7

@ AR7 দ্বারা সরবরাহিত দুর্দান্ত লিঙ্কটি হাইলাইট করার উদ্দেশ্যে এবং সেই লিঙ্কটি কিছুক্ষণ আগে চলে গেছে:

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

কখনও কখনও আপনি রেডাক্স স্টেট থেকে রিঅ্যাক্ট অবস্থায় যেতে চান (যখন রেডাক্সে কোনও কিছু স্টোর করার সময় বিশ্রী আসে) বা অন্য উপায়ে (যখন আরও উপাদানগুলির কিছু স্থানীয় অবস্থানে অ্যাক্সেস থাকা প্রয়োজন যা স্থানীয় ছিল))

থাম্বের নিয়মটি হ'ল: যা কিছু কম বিশ্রী হবে তা করুন।

ড্যান আব্রামভ: https://github.com/reactjs/redux/issues/1287#issuecomment-175351978


-9

হ্যাঁ, রেডাক্সে সমস্ত উপাদান রাষ্ট্র সঞ্চয় করার জন্য এটি চেষ্টা করার মতো । আপনি যদি তা করেন তবে আপনি রেডাক্সের অনেকগুলি বৈশিষ্ট্য যেমন টাইম ট্র্যাভেল ডিবাগিং এবং পুনরায় খেলতে সক্ষম বাগ রিপোর্টগুলি থেকে উপকৃত হবেন। যদি আপনি না করেন তবে এই বৈশিষ্ট্যগুলি সম্পূর্ণ ব্যবহারযোগ্য নয়

আপনি যে কোনও সময় রেডাক্সে কোনও উপাদান স্টেট পরিবর্তন সংরক্ষণ করবেন না , সেই পরিবর্তন সম্পূর্ণভাবে রেডাক্স পরিবর্তনের স্ট্যাক থেকে হারিয়ে গেছে এবং আপনার অ্যাপ্লিকেশন ইউআই স্টোরের সাথে সিঙ্কের বাইরে চলে যাবে। এটি যদি আপনার পক্ষে গুরুত্বপূর্ণ না হয় তবে নিজেকে জিজ্ঞাসা করুন কেন রেডাক্স মোটেই ব্যবহার করবেন? আপনার অ্যাপ্লিকেশন এটি ছাড়া কম জটিল হবে!

পারফরম্যান্সের কারণে, আপনি এমন this.setState()কোনও কিছুতে ফিরে যেতে ইচ্ছুক হতে পারেন যা বার বার বহু ক্রিয়া প্রেরণ করে। উদাহরণস্বরূপ: প্রতিটি সময় ব্যবহারকারী কোনও কী টাইপ করে রেডাক্সে একটি ইনপুট ক্ষেত্রের স্থিতি সংরক্ষণের ফলে ফলাফল খারাপ হতে পারে। আপনি এটিকে লেনদেনের মতো চিকিত্সা করে সমাধান করতে পারেন: একবার ব্যবহারকারী ক্রিয়া "প্রতিশ্রুতিবদ্ধ" হয়ে গেলে Redux এ চূড়ান্ত অবস্থাটি সংরক্ষণ করুন।

আপনার মূল পোস্টে রেডাক্স উপায়টি কীভাবে "লেখার অনেক কোডের নরক" তা উল্লেখ করে। হ্যাঁ তবে আপনি স্থানীয় উপাদান উপাদান হিসাবে সাধারণ নিদর্শন জন্য বিমূর্ততা ব্যবহার করতে পারেন।


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

4
তাহলে আদৌ রেডাক্স কেন ব্যবহার করবেন? আপনি যদি রেডাক্সে সমস্ত কিছু না রাখেন তবে আপনি সমস্ত বৈশিষ্ট্যগুলি হারাবেন, যেমন ডেভটোলগুলি। এটি আসলে সব কিছুই বা কিছুই নয়। আপনি যদি এই পোস্টের শীর্ষ উত্তরের মতো ড্রপডাউন মেনুর জন্য সেটস্টেট () ব্যবহার করেন তবে আপনার ব্যবহারকারীরা ড্রপডাউন মেনুতে যে কোনও সমস্যার মুখোমুখি হতে পারে সেটিকে ডিবাগ করতে আপনি ডিভোটলগুলি ব্যবহার করতে পারবেন না। আপনি যখন ওভারলেটির জন্য সেটস্টেট () ব্যবহার করেন তখন এটি আরও খারাপ কারণ ওভারলে দেখানোর আগে এবং পরে সময় ভ্রমণের কোনও উপায় নেই। সেটস্টেট () এখানে ছিটিয়ে দেওয়া হয়েছে এবং খুব ত্রুটির প্রবণতা রয়েছে কারণ দেবকে কী ভাঙতে পারে তা নিয়ে ক্রমাগত চিন্তাভাবনা করতে হয়।
kumar303

একটি আরও নির্দিষ্ট উত্তর হিসেবে, একটি কোডবেস প্রতিটি পরিবর্তনশীল লগিং একটি সহায়ক রূপক থেকে প্রশ্ন ব্যবহার সম্বন্ধে নয় this.setState()বা dispatch(action...)। একটি this.setState()সর্বত্র ব্যবহার করার দরকার নেই তবে যখন আপনার প্রয়োজন হবে তখন আমার পরামর্শটি হল রেডাক্স ব্যবহারের পরিবর্তে 99% ক্ষেত্রে, this.setState()পারফরম্যান্সের উদ্বেগের ভিত্তিতে 1% এর জন্য ফিরে আসুন ।
কুমার 303

প্রতিটি ভেরিয়েবল লগ করা আমার কাছে রেডাক্সে সমস্ত কিছু স্থাপনের সাথে সমান এবং সাধারণ নিয়ম হিসাবে সমানভাবে অপ্রয়োজনীয় বলে মনে হয়। Redux বাইরে কিছু জিনিস ছেড়ে যাওয়া সবকিছু যে জন্য বৈশিষ্ট্য অস্বীকার করে না হয় যতদিন রাষ্ট্র আলাদা হিসাবে Redux হবে। অর্থাৎ আমি এখনও আমার এপিআই কল লজিকটি ডিবাগ করতে পারি যা একটি রেড বক্সের রাজ্য না থাকলেও রেডাক্সের মাধ্যমে পাইপ করা হয়। ওপিটির একটি বিন্দু রয়েছে - এটি রেডাক্স ব্যবহার করার জন্য একাধিক জায়গায় আরও কোডের প্রয়োজন এবং সম্ভবত তারা তালিকাভুক্ত নির্দিষ্ট উদাহরণে এটি ন্যায়সঙ্গত নয়।
জেডি স্যান্ডিফার

আপনি আসলে আপনার এপিআই যুক্তিটি ডিবাগ করতে পারবেন না। এটাই আমার বক্তব্য। আপনি যেখানে ভ্রমণে সময় কাটবেন সেই পরিস্থিতিতে আগে থেকে ধারণা করা সত্যিই শক্ত, সুতরাং কোনও পারফরম্যান্সের সমস্যা না হওয়া পর্যন্ত রেডাক্সে সমস্ত রাজ্য (নির্বাচন বাক্সের রাজ্য সহ) রাখাই ভাল।
কুমার 303
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.