প্রতিক্রিয়া / পুনর্নির্মাণের জন্য শিক্ষানবিশদের গাইড - শেখা কীভাবে শুরু করা যায় এবং অতিমাত্রায় পরাস্ত হওয়া যায় না

আনস্প্ল্যাশ-এ রোমান ম্যাজারের ছবি

দাবি অস্বীকার: এটি একটি প্রতিক্রিয়া / রেডাক্স শিক্ষানবিস দ্বারা লিখিত একটি শিক্ষানবিশ গাইড।

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

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

সূত্র: http://gph.is/2k9DFT4

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

পদক্ষেপ 1: একটি মতামত গঠনের পদ্ধতির গ্রহণ করুন এবং এর সাথে আঁকুন

আমি এই টিউটোরিয়াল অনুসরণ করেছি।

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

পদক্ষেপ 2: ছোট শুরু করুন

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

ইথেরিয়ামে নিবন্ধগুলির একটি তালিকা রেন্ডার করুন

পদক্ষেপ 3: একটি বয়লার প্লেট চয়ন করুন

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

এই অনুশীলনের জন্য প্রারম্ভিক পয়েন্ট এবং সমাপ্ত কোড সহ এখানে রেপো রয়েছে।

এটি ফাইল কাঠামো।

src / উপাদান / তালিকাভিউ.জেএস listRow.js ধারক / নিবন্ধগুলি ইনডেক্স.জেএস পরিষেবাদি / আর্টিকেল.জেএস ব্যবসায় / নিবন্ধ / ক্রিয়া

এই টিউটোরিয়ালটি অনুসরণ করার আগে, "ক্রিয়া" এবং "হ্রাস" এর মতো শব্দগুলি যদি কোনও ঘন্টা বাজায় না, তবে আমি দৃ strongly়ভাবে সুপারিশ করি যে আপনি অফিসিয়াল রেডাক্স ডকুমেন্টেশন বা আমার লেখা নিবন্ধে মূল ধারণাটি পড়ুন:

পদক্ষেপ 4: রেডাক্স স্ট্যাটাস দিয়ে শুরু করুন

আমাদের অ্যাপের অবস্থা কী? এটি নিবন্ধের তালিকা সহ একটি সাধারণ এক পৃষ্ঠার অ্যাপ্লিকেশন। আমাদের সার্ভার থেকে প্রাপ্ত নিবন্ধগুলির তালিকাটি সংরক্ষণ করতে হবে। আপনি যদি src / পরিষেবাদি / নিবন্ধগুলির আওতায় নিবন্ধগুলি। Js ফাইলটি দেখেন তবে আপনি নিবন্ধগুলির একটি অ্যারে দেখতে পাবেন। যেহেতু এই অনুশীলনের উদ্দেশ্য প্রতিক্রিয়া / Redux আর্কিটেকচারের ডেটা প্রবাহের সাথে পরিচিত হওয়া, তাই getAllArticles () ফাংশনটি প্রয়োজনীয় নিবন্ধগুলি সরাসরি ফেরত দেয়। বাস্তব বিশ্বে, এই ফাংশনটি একটি রিমোট API এ অ্যাসিক্রোনাস কল হবে।

এখন প্রশ্ন উঠছে যে আমরা কীভাবে আমাদের রাষ্ট্রের কাঠামো তৈরি করতে পারি। সার্ভার থেকে প্রাপ্ত প্রতিক্রিয়া (বা এই ক্ষেত্রে getAllArticles ফাংশন থেকে) অবজেক্টগুলির একটি অ্যারে। আমরা এটি আমাদের রাজ্যে রাখতে পারি।

তবে কি এই শর্তটি মডেল করার সর্বোত্তম উপায়? দৃশ্যের কল্পনা করুন যেখানে আপনাকে নিবন্ধের এন্ট্রি আপডেট করতে হবে এবং অ্যাপটি আপনার পছন্দের সংবাদগুলি সন্ধান করতে অ্যারের মাধ্যমে পুনরাবৃত্তি করবে। অ্যারে আসলে বড় হলে কী হবে? এই পদ্ধতির খুব পারফরম্যান্স হবে না।

যখন আমরা একটি রাষ্ট্রের সাথে আমাদের রাষ্ট্র গঠন করি, তখন একটি নিবন্ধ অ্যাক্সেস করা অনুসন্ধানে পরিণত হয়। আইটেম রেন্ডারিংয়ের জন্য আমরা আইডির অতিরিক্ত অ্যারে সঞ্চয় করতে পারি।

পদক্ষেপ 5: শুরু থেকে শেষ পর্যন্ত আপনার স্ট্যাটাসের জন্য ডেটা প্রবাহকে প্রয়োগ করুন

আমরা কীভাবে এই স্ট্যাটাসটি আপডেট করব? এখানেই অ্যাকশন এবং হ্রাসকারীরা খেলতে আসে। এই ফ্লোচার্ট বিবেচনা করুন:

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

আসুন আমাদের অ্যাপে ক্রিয়াগুলির ধরণ নির্ধারণ করে শুরু করা যাক। এটি কীভাবে নিবন্ধগুলি পাওয়া যায় তার একটি সাধারণ ধ্রুবক সংজ্ঞা। পরে আমরা সর্বদা আরও সংজ্ঞা যুক্ত করতে পারি, উদাঃ খ। একটি এন্ট্রি আপডেট করুন বা একটি এন্ট্রি মুছুন।

এবার অ্যাকশনে নামি। মনে রাখবেন যে ব্যাকএন্ড থেকে আমরা যে প্রতিক্রিয়া পেয়েছি তা হ'ল অবজেক্টের অ্যারে যা আমরা লড্যাশ ফাংশন কীবি ব্যবহার করে কোনও বস্তুতে পরিণত করি।

রিডিউসার সাধারণ পদার্থটির মূল্যায়ন করে যা ক্রিয়া প্রকার এবং এর পেওলড ধারণ করে। এটি তখন রাজ্যে ডেটা সংরক্ষণ করে।

পদক্ষেপ:: রেন্ডারিং

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

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

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

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

এবং এটাই! আমাদের ব্রাউজারে নিবন্ধগুলির একটি তালিকা রয়েছে!

পদক্ষেপ 7: কোডের যে কোনও জায়গায় অ্যান্টি-প্যাটার্ন?

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

এখানে আমাদের getArticles নির্বাচনকারী:

আর্টিকেল ইনডেক্স.জেজে ম্যাপস্টেটটোপ্রস ফাংশন হয়ে যায়:

বোনাস: একই চিন্তা প্রক্রিয়া অনুসরণ করুন এবং একটি ফিল্টার তৈরি করুন

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

ধুয়ে ফেলুন, পুনরাবৃত্তি করুন, পুনরায় তৈরি করুন

শিখুন প্রতিক্রিয়া / রেডাক্স একটি খরগোশের গর্তে ঝাঁপ দেওয়ার মতো, তবে এটি আমাকে সন্দেহজনক থেকে বিশ্বাসী করে তুলেছে। আমি আশা করি এই নিবন্ধটি আপনার শেখার গতি বাড়িয়ে দেবে।

শুরু থেকে, আমার শেখার প্রকল্পটি একটি নিউজ এগ্রিগেটর এবং একটি ট্রেন্ড ট্র্যাকিং অ্যাপ্লিকেশন হিসাবে বিকশিত হয়েছে!

পড়ার জন্য আপনাকে ধন্যবাদ!

আপনি যদি স্টিমেট থেকে থাকেন তবে ব্লকচেইন সোশ্যাল মিডিয়া (রেডডিট এবং মিডিয়ামের প্রেমের সন্তানের মতো), এখানে থামুন: