javascript - ফেসবুক ফ্লাক্সের উপর কেন রেডাক্স ব্যবহার করবেন?




reactjs reactjs-flux (6)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

মুল ধারণা
Redux নিজেই খুব সহজ।

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

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

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

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

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

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

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% কোড কেবল সরল জাভাস্ক্রিপ্ট, রেডাক্সের কোনও ব্যবহার ছাড়াই নিজেই, এর এপিআই বা কোনও যাদু।





redux