আমি জানি রেডাক্স ফ্লাক্সের একটি আরও ভাল "বাস্তবায়ন", বা আরও ভাল করে বলা যে এটি জিনিসকে সহজ করার জন্য একটি নতুন নকশা (অ্যাপ্লিকেশন স্টেট ম্যানেজমেন্ট)।
প্রতিক্রিয়াশীল প্রোগ্রামিং (আরএক্সজেএস) সম্পর্কে আমি অনেক শুনেছি, তবে আমি এটি শিখতে এখনও ডাইভ করি নি।
সুতরাং আমার প্রশ্ন হ'ল: এই দুটি প্রযুক্তির মধ্যে কোনও ছেদ (সাধারণ কিছু আছে) বা তারা পরিপূরক? ... নাকি সম্পূর্ণ আলাদা?
উত্তর:
সংক্ষেপে, এগুলি খুব আলাদা উদ্দেশ্যে খুব আলাদা লাইব্রেরি, তবে হ্যাঁ কিছু অস্পষ্ট মিল রয়েছে।
Redux অ্যাপ্লিকেশন জুড়ে রাষ্ট্র পরিচালনার জন্য একটি সরঞ্জাম। এটি সাধারণত ইউআইগুলির জন্য একটি আর্কিটেকচার হিসাবে ব্যবহৃত হয়। এটিকে কৌণিকের অর্ধেকের বিকল্প হিসাবে ভাবেন।
আরএক্সজেএস একটি প্রতিক্রিয়াশীল প্রোগ্রামিং লাইব্রেরি। এটি সাধারণত জাভাস্ক্রিপ্টে অ্যাসিক্রোনাস কার্য সম্পাদন করার সরঞ্জাম হিসাবে ব্যবহৃত হয়। প্রতিশ্রুতির বিকল্প হিসাবে এটি ভাবেন।
প্রতিক্রিয়াশীল প্রোগ্রামিং একটি দৃষ্টান্ত (কাজ করার এবং চিন্তা করার উপায়) যেখানে ডেটা পরিবর্তনগুলি দূর থেকে লক্ষ্য করা যায় । দূরত্ব থেকে ডেটা পরিবর্তন করা হয় না ।
এখানে দূর থেকে পরিবর্তিত একটি উদাহরণ :
// In the controller.js file
model.set('name', 'George');মডেল পরিবর্তিত হয় কন্ট্রোলার থেকে।
দূর থেকে পর্যবেক্ষণের উদাহরণ এখানে :
// logger.js
store.subscribe(function (data) {
console.log(data);
});লগারে আমরা স্টোরের (দূর থেকে) ঘটে যাওয়া ডেটা পরিবর্তনগুলি পর্যবেক্ষণ করি এবং কনসোলে লিখি।
রেডাক্স কিছুটা প্রতিক্রিয়াশীল দৃষ্টান্ত ব্যবহার করে: স্টোরটি প্রতিক্রিয়াশীল। আপনি এর সামগ্রীটি দূর থেকে সেট করেন না। সে কারণেই store.set()রেডাক্সে নেই। স্টোরটি দূর থেকে ক্রিয়া পর্যবেক্ষণ করে এবং নিজেই পরিবর্তিত হয়। এবং স্টোর অন্যকে দূর থেকে তার ডেটা পর্যবেক্ষণ করতে দেয়।
আরএক্সজেএস রিঅ্যাকটিভ দৃষ্টান্তও ব্যবহার করে তবে কোনও আর্কিটেকচার হওয়ার পরিবর্তে এটি আপনাকে "দূর থেকে পর্যবেক্ষণ" প্যাটার্নটি সম্পাদন করতে বেসডিং বিল্ডিং ব্লক, অবজারভেবলস দেয় ।
উপসংহারে বলা যায়, বিভিন্ন উদ্দেশ্যে খুব আলাদা জিনিস, তবে কিছু ধারণা ভাগ করুন।
তারা খুব আলাদা জিনিস।
আরএক্সজেএস রিঅ্যাকটিভ প্রোগ্রামিং করতে ব্যবহৃত হতে পারে এবং এটি 250+ অপারেটর সহ একটি খুব পুস্তকাগার।
এবং রেডাক্স গিথুব রেপোতে বর্ণিত হয়েছে "জাভা স্ক্রিপ্ট অ্যাপসের জন্য রেডাক্স একটি পূর্বাভাসযোগ্য রাষ্ট্রের ধারক"।
অ্যাপ্লিকেশনগুলিতে স্থিতি পরিচালনা করতে Redux হ'ল একটি সরঞ্জাম। তবে তুলনায় আপনি কেবল আরএক্সজেএস-এ একটি সম্পূর্ণ অ্যাপ্লিকেশন তৈরি করতে পারেন।
আশাকরি এটা সাহায্য করবে :)
Redux হ'ল একটি রাজ্য পরিচালনার লাইব্রেরি যা আপডেট ক্রিয়াকলাপগুলির জন্য সুসংজ্ঞায়িত মান সহ আসে। যতক্ষণ আপনি স্ট্যান্ডার্ডের সাথে লেগে থাকেন আপনি নিজের ডেটা প্রবাহকে বুদ্ধিমান এবং যুক্তিযুক্ত করে রাখতে পারেন। এটি মিডলওয়্যারগুলি এবং স্টোর বর্ধকগুলির সাথে ডেটা প্রবাহকে বাড়ানোর ক্ষমতাও এনেছে।
আরএক্সজেএস প্রতিক্রিয়াশীল প্রোগ্রামিংয়ের একটি সরঞ্জামকিট । আপনার অ্যাপ্লিকেশনে ঘটে যাওয়া প্রতিটি জিনিসই আপনি স্ট্রিম হিসাবে ভাবতে পারেন। আরএক্সজেএস সেই স্ট্রীমগুলি পরিচালনা করতে একটি খুব সমৃদ্ধ সরঞ্জাম সেট দেয়।
আরএক্সজেএস এবং রেডাক্স কোথায় বাধা দেয়? রিডেক্সে আপনি ক্রিয়াসহ আপনার রাষ্ট্র আপডেট করেন এবং স্পষ্টতই এই ক্রিয়াগুলি স্ট্রিম হিসাবে বিবেচনা করা যেতে পারে। রিডেক্স-অবজারভেবলের মতো মিডলওয়্যার ব্যবহার করে (আপনাকে করতে হবে না) আপনি প্রতিক্রিয়াশীল উপায়ে আপনার তথাকথিত "ব্যবসায়িক যুক্তি" প্রয়োগ করতে পারেন। আরেকটি বিষয় হ'ল আপনি নিজের রডেক্স স্টোর থেকে একটি পর্যবেক্ষণযোগ্য তৈরি করতে পারেন যা কখনও কখনও বর্ধক ব্যবহারের চেয়ে সহজ হতে পারে।
এটি সংক্ষেপে বলতে:
রেডাক্স: স্টেট ম্যানেজমেন্টের জন্য ফ্লাক্স অনুপ্রাণিত গ্রন্থাগার ব্যবহৃত হয় ।
আরএক্সজেএস: এটি প্রতিক্রিয়াশীল প্রোগ্রামিং দর্শনের উপর ভিত্তি করে আরেকটি জাভাস্ক্রিপ্ট লাইব্রেরি যা "স্ট্রিমস" (পর্যবেক্ষণযোগ্য ইত্যাদি) নিয়ে কাজ করার জন্য ব্যবহৃত হয় [স্ট্রিম ধারণাগুলি বুঝতে রিঅ্যাকটিভ প্রোগ্রামিং সম্পর্কে পড়ুন]।
আমি যখন থেকে রেডাক্স-অনুপ্রাণিত আরএক্সজেএস-কোডটি দিয়েছিলাম তখন থেকে আমি কিছুটা বাস্তববাদী পার্থক্য যুক্ত করতে চেয়েছিলাম।
আমি প্রতিটি ক্রিয়াকলাপকে সাবজেক্ট উদাহরণে ম্যাপ করেছি। প্রতিটি রাষ্ট্রীয় উপাদানগুলির একটি সাবজেক্ট থাকবে যা তারপরে একটি হ্রাসকারক ফাংশনে ম্যাপ করা হবে। সমস্ত হ্রাসকারী স্ট্রিমগুলির সাথে একত্রিত হয় mergeএবং তারপরে scanরাজ্যটিকে আউটপুট করে। ডিফল্ট মানটি এর startWithঠিক আগে সেট করা থাকে scan। আমি ব্যবহার করতামpublishReplay(1) রাজ্যের জন্য , তবে পরে এটি অপসারণ করতে পারে।
প্রতিক্রিয়া বিশুদ্ধ রেন্ডার ফাংশনটি কেবলমাত্র সেই জায়গায় থাকবে যেখানে আপনি সমস্ত প্রযোজক / বিষয় প্রেরণ করে ইভেন্টের ডেটা তৈরি করেন।
আপনার যদি সন্তানের উপাদান থাকে তবে আপনাকে সেই রাজ্যগুলি কীভাবে আপনার মধ্যে সংযুক্ত করা যায় তা বর্ণনা করতে হবে। combineLatestএটির জন্য একটি ভাল সূচনা পয়েন্ট হতে পারে।
বাস্তবায়নে উল্লেখযোগ্য পার্থক্য:
মিডলওয়্যার নেই, কেবলমাত্র rxjs অপারেটর। আমি মনে করি এটিই সবচেয়ে বড় শক্তি এবং দুর্বলতা। আপনি এখনও ধারণাগুলি ধার নিতে পারেন, তবে রেডেক্স এবং চক্র.জেএস এর মতো বোন সম্প্রদায়ের কাছ থেকে সহায়তা পাওয়া আমার পক্ষে কঠিন বলে এটি আর একটি কাস্টম সমাধান। এজন্য এই লেখায় আমাকে "আমরা" পরিবর্তে "আমি" লিখতে হবে।
ক্রিয়া প্রকারের জন্য কোনও স্যুইচ / কেস বা স্ট্রিং নেই। আপনার কাছে ক্রিয়াগুলি পৃথক করার আরও গতিশীল উপায় রয়েছে।
আরএক্সজেগুলি অন্য কোথাও একটি সরঞ্জাম হিসাবে ব্যবহার করা যেতে পারে এবং এটি স্টেট ম্যানেজমেন্টের অন্তর্ভুক্ত নয়।
ক্রিয়া প্রকারের (?) থেকে প্রযোজকের সংখ্যা কম। আমি এ সম্পর্কে নিশ্চিত নই, তবে পিতা বা মাতা উপাদানগুলিতে আপনার অনেক প্রতিক্রিয়া থাকতে পারে যা সন্তানের উপাদানগুলি শোনে। এর অর্থ কম জরুরী কোড এবং কম জটিলতা।
সমাধানটির মালিক আপনার। কোনও কাঠামোর দরকার নেই। ভাল এবং খারাপ। আপনি আপনার নিজের কাঠামোটি যেভাবেই লিখতে হবে।
এটি অনেক বেশি ফ্র্যাক্টাল এবং আপনি সহজেই একটি সাব-ট্রি, বা অ্যাপ্লিকেশন রাষ্ট্র গাছের একাধিক অংশের পরিবর্তনগুলিতে সাবস্ক্রাইব করতে পারেন।
আমি আরও অনেক বড় সুবিধা নিয়ে কাজ করছি যেখানে শিশু উপাদানগুলি স্ট্রিম হিসাবে বর্ণনা করা হয়েছে। এর অর্থ হ'ল আমাদের হ্রাসকারীদের মধ্যে পিতামাতার ও শিশুদের রাষ্ট্রের তুলনা করতে হবে না, যেহেতু আমরা কেবল ("ন্যায়সঙ্গত") উপাদানগুলির কাঠামোর ভিত্তিতে রাজ্যগুলিকে পুনরাবৃত্তভাবে সংহত করতে পারি।
প্রতিক্রিয়াশীল প্রতিক্রিয়াশীল পরিস্থিতি আরও ভাল পরিচালনা না করা পর্যন্ত আমি প্রতিক্রিয়া এড়াতে এবং স্ন্যাববডম বা অন্য কিছু নিয়ে যাব। আমরা কেন আমাদের রাজ্যটিকে আবার প্রপসের মাধ্যমে ভেঙে ওপরের দিকে গড়ে তুলি? তাই আমি স্নাবডমডম দিয়ে এই ধরণের 2 সংস্করণ তৈরির চেষ্টা করব will
এখানে আরও উন্নত তবে ছোট স্নিপেট রয়েছে যেখানে state.ts ফাইলটি রাষ্ট্রের স্ট্রিম তৈরি করে। এটি আজাক্স-ফর্ম উপাদানটির রাজ্য যা বৈধতা নিয়ম এবং CSS শৈলীর সাথে ক্ষেত্রগুলির (ইনপুট) একটি বস্তু পায়। এই ফাইলে আমরা কেবলমাত্র শিশুদের সমস্ত রাজ্যকে ফর্মের সাথে একত্রিত করতে ক্ষেত্রের নামগুলি (অবজেক্ট কীগুলি) ব্যবহার করি।
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
}
}যদিও কোডটি বিচ্ছিন্নভাবে খুব বেশি না বলে, এটি আপনাকে কীভাবে উপরের দিকে রাজ্য বানাতে পারে এবং কীভাবে আপনি সহজেই গতিশীল ইভেন্টগুলি উত্পাদন করতে পারবেন তা দেখায়। প্রদানের মূল্যটি হ'ল আপনাকে কোডের একটি ভিন্ন স্টাইল বুঝতে হবে। এবং আমি সেই মূল্য দিতে পছন্দ করি।