ফেসবুক ফ্লাক্সের উপর কেন রেডাক্স ব্যবহার করবেন? [বন্ধ]


1126

আমি এই উত্তরটি পড়েছি , বয়লারপ্লেট হ্রাস করে কয়েকটি গিটহাবের উদাহরণ দেখেছি এবং কিছুটা রিডুএক্স চেষ্টা করেছি (টুডো অ্যাপস)।

আমি যেমন বুঝতে পেরেছি, সরকারী রিডেক্স ডক প্রেরণাগুলি traditionalতিহ্যবাহী এমভিসি আর্কিটেকচারের সাথে তুলনা করে পেশাদার সরবরাহ করে। তবে এটি প্রশ্নের উত্তর দেয় না:

আপনার ফেসবুক ফ্লাক্সের উপর Redux ব্যবহার করা উচিত কেন?

এটি কি কেবল প্রোগ্রামিং শৈলীরই প্রশ্ন: কার্যকরী বনাম অ-কার্যকরী? বা প্রশ্নটি এমন দক্ষতা / দেব-সরঞ্জামগুলিতে রয়েছে যা রিডুএক্স পদ্ধতির অনুসরণ করে? হয়তো স্কেলিং? নাকি পরীক্ষা দিচ্ছেন?

আমি যদি ঠিক বলে থাকি যে ফাংশনাল ভাষা থেকে আসা লোকদের জন্য রূডক্স একটি ফ্লাক্স?

এই প্রশ্নের উত্তর দেওয়ার জন্য আপনি ফ্লাক্স বনাম রিডুএক্সের রিডাক্সের প্রেরণা পয়েন্টগুলির প্রয়োগের জটিলতা তুলনা করতে পারেন।

অফিসিয়াল রিডেক্স ডক মোটিভেশন থেকে অনুপ্রেরণা পয়েন্টগুলি এখানে :

  1. আশাবাদী আপডেটগুলি হ্যান্ডলিং ( যেমনটি আমি বুঝতে পেরেছি, এটি খুব কমই 5 ম পয়েন্টের উপর নির্ভর করে face ফেসবুক প্রবাহে এটি কার্যকর করা কি কঠিন? )
  2. সার্ভারে রেন্ডারিং ( ফেসবুক ফ্লাক্সও এটি করতে পারে redu রিডুএক্সের সাথে তুলনা করে কোনও সুবিধা? )
  3. রুট ট্রানজিশন সম্পাদনের আগে ডেটা আনয়ন ( এটি ফেসবুক প্রবাহে কেন অর্জন করা যায় না? কী কী সুবিধা? )
  4. হট রিলোডলোড (হট রিলোড পুনরায় প্রতিক্রিয়া দিয়ে এটি সম্ভব । কেন আমাদের রিডুক দরকার? )
  5. পূর্বাবস্থায় ফেরান / কার্যকারিতা
  6. অন্য কোন পয়েন্ট? স্থায়ী রাষ্ট্রের মতো ...

73
রেডাক্স হ'ল "ফেসবুক ফ্লাক্স" এর একটি বাস্তবায়ন। ফ্লাক্স একটি লাইব্রেরি বা কাঠামো নয়। এটি কেবল ওয়েব অ্যাপ্লিকেশনগুলির জন্য প্রস্তাবিত আর্কিটেকচার। আপনি দেখতে পাচ্ছেন না যে আপনি কীভাবে একটি বিমূর্ত ধারণাটিকে প্রেরণা দিয়েছিলেন তার সাথে একটি কংক্রিট বাস্তবায়ন তুলনা করতে পারেন। ফেসবুকের একটি ফ্লাক্স আর্কিটেকচারের প্রকৃত বাস্তবায়ন হ'ল রিলে এবং ওপেন সোর্স সংস্করণ এখনও খুব প্রাথমিক পর্যায়ে রয়েছে। ফেসবুক.
চার্লি মার্টিন

2
এফবি ফ্লাক্স দ্বারা @ চার্লিমার্টিন আমি এই গিথুব / পৃষ্ঠার বই / ফ্লাক্স / ট্রি / মাস্টার / উদাহরণগুলির মতো আবেদনকারীর পক্ষে আছি । আমার বর্তমান প্রকল্পটি এফবি ফ্লাক্সের কারণে (এফবি ফ্লাক্সের কারণে) লেখা আছে। আপনি চাইলে এফবি ফ্লাক্স আর্কিটেকচারের উপরে Redux আর্কিটেকচার হিসাবে ভাবতে পারেন।
ভিবি_

2
আমি এখন বুঝতে পেরেছি. আপনি ফেসবুকের উদাহরণ ফ্লাক্স বাস্তবায়নকে রেডাক্সের ফ্লাক্স বাস্তবায়নের সাথে তুলনা করতে চান
চার্লি মার্টিন

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

উত্তর:


1958

রেডাক্স লেখক এখানে!

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

রেডাক্সের মধ্যে কোনও মৌলিক পার্থক্য নেই, তবে আমি দেখতে পেয়েছি এটি কিছু নির্দিষ্ট বিমূর্ততা সহজ করে তোলে বা কমপক্ষে বাস্তবায়ন সম্ভব হয়েছে, এটি ফ্লাক্সে কার্যকর করা কঠিন বা অসম্ভব হতে পারে।

হ্রাস রচনা

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

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

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

সার্ভার রেন্ডারিং

লোকেরা সার্ভারে ফ্লাক্সের সাথে জরিমানা করে চলেছে, কিন্তু আমাদের কাছে প্রতিটি 20 ফ্লাক্স লাইব্রেরি রয়েছে যা প্রতিটি সার্ভারকে "সহজ" রেন্ডারিং করার চেষ্টা করছে, সম্ভবত ফ্লুসের সার্ভারে কিছু রুক্ষ প্রান্ত রয়েছে। সত্যটি হ'ল ফেসবুক খুব বেশি সার্ভার রেন্ডারিং করে না, তাই তারা এ সম্পর্কে খুব বেশি উদ্বিগ্ন হয়নি, এবং আরও সহজ করার জন্য বাস্তুতন্ত্রের উপর নির্ভর করে।

Traditionalতিহ্যবাহী ফ্লাক্সে, স্টোরগুলি সিলেটলেট। এর অর্থ সার্ভারে বিভিন্ন অনুরোধের জন্য ডেটা আলাদা করা শক্ত। অসম্ভব নয়, তবে শক্ত। এ কারণেই বেশিরভাগ ফ্লাক্স লাইব্রেরি (পাশাপাশি নতুন ফ্লাক্স ইউটিলস ) এখন আপনাকে সিঙ্গেলনের পরিবর্তে ক্লাস ব্যবহার করার পরামর্শ দেয়, যাতে আপনি অনুরোধ অনুযায়ী স্টোরগুলি ইনস্ট্যান্ট করতে পারেন।

এখনও নিম্নলিখিত সমস্যাগুলি যে আপনার (হয় নিজের বা হিসাবে আপনার প্রিয় সর্দি গ্রন্থাগার যেমন সাহায্যে সর্দি মধ্যে সমাধান করতে প্রয়োজন হতবুদ্ধি বা অল্টার ):

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

স্বীকার করা যায় যে ফ্লাক্স ফ্রেমওয়ার্কগুলি (ভ্যানিলা ফ্লাক্স নয়) এর এই সমস্যাগুলির সমাধান রয়েছে তবে আমি সেগুলি অত্যধিক জটিল বলে মনে করি। উদাহরণস্বরূপ, ফ্লুমম্যাক্স আপনাকে কার্যকর করতে serialize()এবং deserialize()আপনার স্টোরগুলিতে জিজ্ঞাসা করে । আল্ট এই জাসন takeSnapshot()ট্রিতে স্বয়ংক্রিয়ভাবে আপনার রাজ্যটিকে সিরিয়ালাইজ করে এই সুন্দর সমাধান করে ।

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

আবার এটি ফ্লাক্স এবং রেডাক্স উভয় ক্ষেত্রেই সম্ভাব্য কিছু বিষয়, তবে ফ্লাকস লাইব্রেরিগুলি এক টন এপিআই এবং কনভেনশন প্রবর্তন করে এই সমস্যাটি সমাধান করে এবং রেডাক্সকে এমনকি এটি সমাধান করতে হবে না কারণ এতে সমস্যা নেই that ধারণাগত সরলতার জন্য প্রথম স্থান ধন্যবাদ।

বিকাশকারী অভিজ্ঞতা

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

আমি এমন কোনও ফ্লাক্স গ্রন্থাগার দেখিনি যা এটি করতে সক্ষম। প্রতিক্রিয়া হট লোডারও আপনাকে এটি করতে দেয় না fact আসলে আপনি যদি ফ্লাক্স স্টোরগুলি সম্পাদনা করেন তবে এটি ভেঙে যায় কারণ তাদের সাথে কী করা উচিত তা জানেন না।

যখন রেডাক্সকে হ্রাসকারী কোডটি পুনরায় লোড করা দরকার হয়, তখন এটি কল করে replaceReducer()এবং অ্যাপটি নতুন কোড দিয়ে চলে। ফ্লাক্সে, ডেটা এবং ফাংশনগুলি ফ্লাক্স স্টোরগুলিতে জড়িয়ে থাকে, সুতরাং আপনি "কেবলমাত্র ফাংশনগুলি প্রতিস্থাপন করতে পারবেন না"। তদুপরি, আপনাকে ডিসপ্যাচারের সাথে কোনওভাবে নতুন সংস্করণগুলি পুনরায় নিবন্ধন করতে হবে — এমন কিছু যা রেডাক্সের কাছে নেই।

ইকোসিস্টেম

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

সরলতা

রেডাক্স ফ্লাক্সের সমস্ত সুবিধা (ক্রিয়াকলাপ রেকর্ডিং এবং পুনরায় খেলনা, একমুখী ডেটা প্রবাহ, নির্ভরশীল মিউটেশন) সংরক্ষণ করে এবং ডিসপ্যাচার এবং স্টোর রেজিস্ট্রেশন প্রবর্তন না করে নতুন সুবিধা (সহজ পূর্বাবস্থায় ফেরত, গরম পুনরায় লোডিং) যুক্ত করে।

এটিকে সহজ রাখা গুরুত্বপূর্ণ কারণ আপনি উচ্চ-স্তরের বিমূর্তি প্রয়োগ করার সময় এটি আপনাকে বুদ্ধিমান করে তোলে।

বেশিরভাগ ফ্লাক্স লাইব্রেরির মতো নয়, রেডাক্স এপিআই পৃষ্ঠটি ক্ষুদ্র। আপনি যদি বিকাশকারীদের সতর্কতা, মন্তব্য এবং স্যানিটি চেকগুলি সরিয়ে ফেলেন তবে এটি 99 লাইন । ডিবাগ করার জন্য কোনও জটিল অ্যাসিঙ্ক কোড নেই।

আপনি এটি পড়তে এবং রেডাক্সের সমস্ত বুঝতে পারবেন।


আরও দেখুন সর্দি তুলনায় Redux ব্যবহারের মূল্যবান উপর আমার উত্তর


3
উত্তরের জন্য ধন্যবাদ ... আমি জেএসে নতুন ... আপনার উত্তরে আপনি বলেছিলেন যে ফ্লাক্স সিঙ্গলটন ডিজাইন প্যাটার্ন ব্যবহার করছে ... আপনি কি আমাকে রেডেক্সে বলতে পারেন যে তারা কী ধরণের ডিজাইনের প্যাটার্ন ব্যবহার করছেন ... এবং প্রবাহের ক্ষেত্রে তুমি আমাকে বলতে যেখানে তারা Singleton প্যাটার্ন ব্যবহার করছেন ... আপনি উভয় একটি উদাহরণ দিতে পারেন ... আমি বুঝতে কি এখান থেকে নকশা প্যাটার্ন আছে Singleton

2
আমি আমার অ্যান্ড্রয়েড / জাভা প্রয়োগ (ফ্লাক্সক্সান) ফ্লাক্সক্সোর (মূলত খাঁটি ফ্লাক্স) এর উপর ভিত্তি করে শুরু করেছি। আমি একবার রিডুএক্স দেখেছি, আমার বিক্রি হয়েছিল। কিছু অংশ আমি নিখুঁতভাবে প্রবাহিত রেখেছিলাম তবে মানুষ, আপনার লিব দুর্দান্ত!
হিমশীতল

5
আপনি কি রেডাক্স শিখতে চান? শুধু এই ভিডিওটি দেখুন: youtube.com/watch?v=ucd5x3Ka3gw
gsalgadotoledo

5
আমরা ফ্লুডক্সের চেয়ে বেশি পছন্দযুক্ত হওয়ার কারণে এটি হ'ল রিডেক্সকে বেছে নিয়েছি। নির্দিষ্ট কোডটি কীভাবে কোথায় যাওয়া উচিত ইত্যাদি বিষয়ে আমরা ক্রমাগত লড়াই করে যাচ্ছিলাম etc. ইত্যাদি। আমরা ওয়েবের জন্য রিডেক্সের সাথে অ্যাপ্লিকেশন তৈরি করেছি এবং দেশীয় প্রতিক্রিয়া দেখাই এবং এটি আশ্চর্যজনক !!
কিছু

1
লীথ গিথুব.আরইটিটিজস / রেডাক্স / ব্লব /… লাইনটি আমি এক সপ্তাহের জন্য যে প্রশ্নের সন্ধান করছিলাম তার উত্তর ছিল: কীভাবে স্টোর এবং হ্রাসকারীদের কাঠামো তৈরি করা যায়, যাতে বিভিন্ন প্রসঙ্গে পুনরায় ব্যবহারযোগ্য উপাদানটির একাধিক উদাহরণগুলি সদৃশ ছাড়াই পরিচালনা করা যায় যুক্তি। উত্তরটি মনে হচ্ছে: তিন স্তরের গভীর স্টোর ব্যবহার করুন: 1 ম স্তর: উপাদানটির নাম ("পৃষ্ঠাগুলি"), ২ য় স্তর: ধারকটির নাম ("স্টারগাজারবাইরোপো"), 3 স্তর: ধারকটির অনন্য কী / আইডি ( ${login}/${name})। আপনাকে অনেক ধন্যবাদ!
qbolec

101

কোওরায়, কেউ বলেছেন :

প্রথমত, ফ্লাক্স ছাড়া প্রতিক্রিয়া সহ অ্যাপ্লিকেশনগুলি লেখা সম্পূর্ণভাবে সম্ভব।

এছাড়াও এই ভিজ্যুয়াল ডায়াগ্রামটি যা আমি উভয়ের তাত্ক্ষণিক দৃষ্টিভঙ্গি দেখাতে তৈরি করেছি, সম্ভবত পুরো ব্যাখ্যাটি পড়তে চান না এমন লোকদের জন্য একটি দ্রুত উত্তর: ফ্লাক্স বনাম রেডাক্স

আপনি যদি এখনও জানতে আগ্রহী হন তবে পড়ুন।

আমি বিশ্বাস করি আপনার শুদ্ধ প্রতিক্রিয়া দিয়ে শুরু করা উচিত, তারপরে রেডাক্স এবং ফ্লাক্স শিখুন। আপনার প্রতিক্রিয়াটির সাথে কিছু বাস্তব অভিজ্ঞতা পাওয়ার পরে, আপনি দেখতে পাবেন যে Redux আপনার জন্য সহায়ক কিনা।

সম্ভবত আপনি অনুভব করবেন যে Redux হুবহু আপনার অ্যাপ্লিকেশনটির জন্য এবং সম্ভবত আপনি এটি জানতে পারবেন যে Redux এমন একটি সমস্যা সমাধানের চেষ্টা করছেন যা আপনি সত্যিই সম্মুখীন হচ্ছেন না।

আপনি যদি রেডাক্সের সাথে সরাসরি শুরু করেন তবে আপনি ওভার-ইঞ্জিনিয়ারড কোড, রক্ষণাবেক্ষণ করতে আরও কঠিন কোড এবং আরও বেশি বাগ সহ এবং রেডাক্স ছাড়াই শেষ করতে পারেন।

রেডাক্স ডক্স থেকে :

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

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

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

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

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

রেডাক্স ডক্স থেকেও :

কোর কনসেপ্টস
রেডাক্স নিজেই খুব সাধারণ।

আপনার অ্যাপের অবস্থা কল্পনা করুন যে একটি সরল বস্তু হিসাবে বর্ণনা করা হয়েছে। উদাহরণস্বরূপ, একটি টুডো অ্যাপ্লিকেশনটির অবস্থা এর মতো দেখতে পারে:

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

সেটটার নেই এমনটি বাদ দিয়ে এই অবজেক্টটি একটি "মডেল" এর মতো। কোডটির বিভিন্ন অংশ ইচ্ছামত রাজ্য পরিবর্তন করতে না পারার ফলে হার্ড-টু-প্রজনন বাগের কারণ হয় causing

রাজ্যে কিছু পরিবর্তন করতে আপনাকে একটি ক্রিয়া প্রেরণ করতে হবে। একটি ক্রিয়া হ'ল একটি সরল জাভাস্ক্রিপ্ট অবজেক্ট (লক্ষ্য করুন কীভাবে আমরা কোনও যাদু প্রবর্তন করি না?) যা ঘটেছে তা বর্ণনা করে। এখানে কয়েকটি উদাহরণ কর্ম রয়েছে:

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

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

function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

এবং আমরা অন্য একটি হ্রাসকারী লিখি যা সংশ্লিষ্ট রাষ্ট্রীয় কীগুলির জন্য এই দুটি হ্রাসকারীকে কল করে আমাদের অ্যাপের সম্পূর্ণ স্থিতি পরিচালনা করে:

function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

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


57

আপনি ড্যান আব্রামভের এই পোস্টটি পড়ার সাথে সবচেয়ে ভাল শুরু করতে পারেন যেখানে তিনি রিডুএক্স লেখার সময় ফ্লাক্সের বিভিন্ন বাস্তবায়ন এবং তাদের ট্রেড-অফগুলি নিয়ে আলোচনা করেছেন: ফ্লাক্স ফ্রেমওয়ার্কের বিবর্তন

দ্বিতীয়ত আপনার যে লিটিভেশন পেজের সাথে লিঙ্ক করা হয়েছে সেটিতে রেডাক্সের প্রেরণাগুলি এতটা ফ্লাক্স (এবং প্রতিক্রিয়া) এর পিছনে প্রেরণাগুলি নিয়ে আলোচনা করে না। তিন মূলনীতি আরো Redux নির্দিষ্ট যদিও এখনও মান সর্দি আর্কিটেকচার থেকে বাস্তবায়ন পার্থক্য সাথে মোকাবিলা না।

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


27

আমি প্রারম্ভিক গ্রহণকারী এবং ফেসবুক ফ্লাক্স লাইব্রেরিটি ব্যবহার করে একটি মাঝারি-বড় একক পৃষ্ঠা অ্যাপ্লিকেশনটি প্রয়োগ করেছি।

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

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

আমরা স্থির করেছি যে আমরা এগিয়ে চলেছি আমরা রেডাক্সে চলে যাব এবং আমি আপনাকে একই কাজ করার পরামর্শ দিচ্ছি;)


আমি ছয় মাস ধরে ফেসবুক ফ্লাক্স অ্যাপটি বিকাশ করছি। এবং আমি এখনও নিশ্চিত নই যে কোনও মাইগ্রেশন সময় রেডাক্স প্রদত্ত সুবিধার জন্য উপযুক্ত কিনা। আমি এফবি ফ্লাক্সের তুলনায় রেডাক্সের পক্ষে সম্পর্কে ভাল / মন্তব্য সম্পর্কে আপনার সমস্ত মন্তব্যকে প্রশংসা করব!
ভিবি_

1
@ ভোলডিমিয়ারবখামাটিউক আমাদের পক্ষে এটি প্রায়শই আরও ভাল ত্রুটি পরিচালনার জন্য আমাদের লিখতে হবে এমন বয়লারপ্লেটের পরিমাণ হ্রাস করার বিষয়ে (রিডেক্স উদাহরণস্বরূপ চিত্কার করবে যদি আপনি এমন কোনও ক্রিয়াকে চালিত করেন যা আপনার ধ্রুবক তালিকায় সংজ্ঞায়িত হয়নি - এফবি ফ্লাক্স হ'ল না এবং এটি সমস্ত কারণ হতে পারে বিভিন্ন ধরণের সমস্যা) প্রবাহে আরও কয়েকটি উন্নত ক্ষমতা রয়েছে তবে আমি সেগুলি এখনও ব্যবহার করি নি
গাই নেশার

1
@ গুয়িনিশের একটি অনির্ধারিত ক্রিয়াটি রান-টাইমে নয়, সংকলন-সময়ে সনাক্ত করা উচিত be ফ্লো (অন্য ফেসবুক অবদান) আপনাকে এটি করতে দেয়।
ডোমিনিক পেরেটেটিআই

@ ডোমিনিকপেরটিটিআই - সত্য (লিটিং ব্যবহার করতেও পারে) তবে রান এ সময়ে ত্রুটি ধরা না পাওয়া দুঃখজনক বিষয়টি সত্য নয়
গাই নেশার

আমি এফবিফ্লাক্স মোকাবেলার জন্য কয়েকটি সাধারণ সহায়ক লিখেছি এবং এটি দেখতে পাওয়া রেডাক্স অ্যাপ্লিকেশনগুলির উদাহরণগুলির চেয়ে কম বয়লারপ্লেট এবং অ্যাপ্লিকেশন সেট আপ বলে মনে হচ্ছে । দুটি অ্যাপ্লিকেশনগুলির মধ্যে গত 9+ মাস ধরে একটি অ্যাপ্লিকেশনটিতে কাজ করেছেন এবং আর্কিটেকচারের সাথে কোনও সমস্যা হয়নি।
rob2d

20

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

আরও তথ্যের জন্য ফ্লাক্স বনাম রেডাক্স


একাধিক দোকানে সম্পর্কে, এখন Redux কিছু করা সম্ভব হয়, প্রতিক্রিয়া-redux আপনি বিছিন্ন দোকানে একটি কী যোগ করতে পারেন: redux.js.org/faq/storesetup কাজ নমুনা: github.com/Lemoncode/redux-multiple-stores
Braulio

6

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


5

২০১ 2018 সালের মাঝামাঝি সময়ে এক্সজেজেএস থেকে কয়েক বছরের রিডাক্ট / রিডাক্স অ্যাডাপ্টর স্থানান্তরিত হয়েছে:

রাইডুএক্স লার্নিং কার্ভটি পিছনে পিছনে স্লাইড করার পরে আমার একই প্রশ্ন ছিল এবং ভেবেছিলাম খাঁটি ফ্লাক্স ওপির মতো সহজ হবে।

উপরের উত্তরগুলিতে উল্লিখিত হিসাবে আমি খুব শীঘ্রই ফ্লুড ওভার ফ্লুডের সুবিধাগুলি দেখেছি এবং এটি আমার প্রথম অ্যাপ্লিকেশনটিতে কাজ করছি।

আবার বয়লার প্লেটে একটি গ্রিপ পাওয়ার সময় আমি অন্যান্য কয়েকটি স্টেট ম্যানেজমেন্ট ল্যাব চেষ্টা করেছিলাম , যেটি খুঁজে পেয়েছি তার মধ্যে সেরাটি আবার মিলছিল

এটা অনেক ছিল তখন ভ্যানিলা রিডেক্সের বেশি স্বজ্ঞাত , এটি 90% বয়লারপ্লেটটি কেটে ফেলেছিল এবং আমি রিডুএক্সে ব্যয় করার সময় 75% কেটে ফেলেছিলাম (এমন একটি কিছু যা আমি মনে করি যে একটি গ্রন্থাগারটি করা উচিত) আমি কয়েকটা এন্টারপ্রাইজ অ্যাপ্লিকেশন পেতে সক্ষম হয়েছি এখনই যাচ্ছি

এটি একই রিডাক্স টুলিংয়ের সাথেও চালিত হয়। এটি একটি ভাল নিবন্ধ যা বেনিফিট কিছু কভার।

সুতরাং এই সরকারী পোস্টটিতে "সিম্পলার রিডুএক্স" অনুসন্ধান করা অন্য যে কোনও ব্যক্তির জন্য, আমি বয়লারপ্লেটের সমস্ত সুবিধা এবং 1/4 দিয়ে রিডুএক্সের একটি সহজ বিকল্প হিসাবে এটি চেষ্টা করার পরামর্শ দিচ্ছি।


আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.