আরএক্সজেএস 6 এর সাথে প্রতিক্রিয়াতে গিটহাব অনুসন্ধান ফাংশনটি কীভাবে তৈরি করা যায় এবং পুনরায় রচনা করুন

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

আমরা নিম্নলিখিত নির্মাণ করছি:

কোনও ক্লাস, লাইফাইসাইকেল হুকস বা সেটস্টেট নেই।

কনফিগারেশন

সবকিছু আমার গিটহাবের উপর রয়েছে।

গিট ক্লোন https://github.com/yazeedb/recompose-github-ui সিডি পুনরায় রচনা করুন-গিথুব-ইউআই ইনস্টল সুতা

মূল শাখায় সমাপ্ত প্রকল্প রয়েছে, তাই আপনি যদি এটি অনুসরণ করতে চান তবে প্রারম্ভিক শাখাটি পরীক্ষা করুন।

গিট চেকআউট শুরু করুন

এবং প্রকল্প চালান।

এনপিএম শুরু

অ্যাপ্লিকেশনটি লোকালহোস্টে চালানো উচিত: 3000। আমাদের প্রাথমিক ইউজার ইন্টারফেস এখানে।

আপনার প্রিয় পাঠ্য সম্পাদকটিতে প্রকল্পটি খুলুন এবং src / index.js দেখুন।

পুনরায় রচনা করুন

আপনি যদি এটি আগে না দেখে থাকেন তবে রিকম্পোজ হ'ল প্রতিক্রিয়ার একটি দুর্দান্ত ইউটিলিটি বেল্ট যা আপনাকে কার্যকরী প্রোগ্রামিং স্টাইলে উপাদান তৈরি করতে দেয়। এটির একটি টন বৈশিষ্ট্য রয়েছে এবং আমার প্রিয় পছন্দগুলি বেছে নিতে আমার খুব কষ্ট হয়।

এটি লোদাশ / রামদা, তবে প্রতিক্রিয়ার জন্য।

আমি এও মনে করি এটি দুর্দান্ত যে তারা পর্যবেক্ষণযোগ্যদের সমর্থন করে। নথি থেকে উদ্ধৃতি:

দেখা যাচ্ছে যে রিঅ্যাক্ট কম্পোনেন্ট এপিআই এর অনেকাংশ পর্যবেক্ষণের ক্ষেত্রে প্রকাশ করা যেতে পারে

আমরা আজ এই ধারণাটি ব্যবহার করব!

আমাদের উপাদান স্ট্রিমিং

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

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

কনফিগারেশনের একটি শট

ইসমাস্ক্রিপ্ট পর্যবেক্ষণযোগ্য প্রস্তাবনায় বর্ণিত স্ট্রিমগুলি পুনরায় রচনা করুন। অবশেষে আধুনিক ব্রাউজারগুলিতে প্রেরণ করা হলে পর্যবেক্ষণযোগ্যরা কীভাবে কাজ করার কথা তা এটি বর্ণনা করে।

তবে, পুরোপুরি প্রয়োগ না হওয়া পর্যন্ত আমরা আরএক্সজেএস, এক্সস্ট্রিম, সর্বাধিক, ফ্লাইড ইত্যাদি লাইব্রেরিতে নির্ভর করি

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

এসআরসি-তে একটি পর্যবেক্ষণযোগ্য কনফিগ.জেএস নামে একটি নতুন ফাইল তৈরি করুন।

আরএক্সজেএস 6 এর সাথে রিকম্পোজ সামঞ্জস্য করতে এই কোডটি যুক্ত করুন:

'rxjs' থেকে import থেকে আমদানি করুন; 'রিকম্পোজ' থেকে আমদানি করুন {setObservableConfig;
setObservableConfig ({fromOesservable: from;);

ইন্ডেক্স.জেজে এটি আমদানি করুন:

আমদানি './observableConfig';

এবং আমরা প্রস্তুত!

পুনরায় রচনা করুন + আরএক্সজেএস

উপাদান আমদানি করুনফ্রিম স্ট্রিম।

আমদানি 'প্রতিক্রিয়া' দ্বারা প্রতিক্রিয়া; 'রিঅ্যাক্ট-ডোম' থেকে রি্যাক্টডোম আমদানি করুন; 'রিকম্পোজ' থেকে আমদানি করুন {উপাদানফ্রিমস্ট্রিম; আমদানি করুন './styles.css'; আমদানি './observableConfig';

এই কোডটি দিয়ে অ্যাপটিকে নতুন সংজ্ঞা দিয়ে শুরু করুন:

কনট অ্যাপ = উপাদানফ্রিমস্ট্রিম (প্রোপ $ => {...});

নোট করুন যে উপাদানফ্রোম স্ট্রিম একটি কলব্যাক ফাংশন গ্রহণ করে যা কোনও প্রপ-স্ট্রিমের প্রত্যাশা করে। ধারণাটি হ'ল আমাদের প্রপস পর্যবেক্ষণযোগ্য হয়ে যায় এবং আমরা সেগুলি একটি প্রতিক্রিয়া উপাদানকে অর্পণ করি।

আপনি যদি আরএক্সজেএস ব্যবহার করেছেন, আপনি মান নির্ধারণের জন্য সঠিক অপারেটরটি জানেন।

মানচিত্র

নাম অনুসারে, আপনি পর্যবেক্ষণযোগ্য (কিছু) পর্যবেক্ষণযোগ্য (অন্য কিছু) রূপান্তর করুন। আমাদের ক্ষেত্রে, পর্যবেক্ষণযোগ্য (প্রপস) পর্যবেক্ষণযোগ্য (উপাদান) হয়ে যায়।

মানচিত্র অপারেটর আমদানি করুন:

'rxjs / অপারেটর' থেকে {মানচিত্র} আমদানি করুন;

এবং অ্যাপ্লিকেশনটির নতুন সংজ্ঞা দিন:

কনট অ্যাপ = উপাদানফ্রিমস্ট্রিম (প্রোপ $ => {রিটার্ন প্রপ $। পাইপ (মানচিত্র (()) => ( )))});

আরএক্সজেএস 5-এর পর থেকে আমরা কনক্রিটেশন অপারেটরগুলির পরিবর্তে পাইপ ব্যবহার করে যাচ্ছি।

আপনার ব্যবহারকারী ইন্টারফেস সংরক্ষণ করুন এবং পর্যালোচনা করুন, একই ফলাফল!

একটি ইভেন্ট হ্যান্ডলার যুক্ত করুন

এখন আমরা আমাদের ইনপুটগুলি আরও কিছুটা প্রতিক্রিয়াশীল করতে যাচ্ছি।

পুনরায় রচনা থেকে ক্রিয়েভেনট হ্যান্ডলার আমদানি করুন।

আমদানি করুন {উপাদানফ্রিম স্ট্রিম, ক্রিয়েভেন্ট হ্যান্ডলার 'থেকে' পুনরায় রচনা করুন ';

এবং এটি এর মতো ব্যবহার করুন:

কনট অ্যাপ = উপাদানফ্রিমস্ট্রিম (প্রোপ $ => {কনস্ট {হ্যান্ডলার, স্ট্রিম} = createEventHandler ();
প্রোপ return। পাইপ (মানচিত্র (()) => ( )))});

createEventHandler দুটি আকর্ষণীয় বৈশিষ্ট্যযুক্ত একটি বস্তু: হ্যান্ডলার এবং স্ট্রিম।

হুডের নীচে, হ্যান্ডলারটি ইভেন্ট প্রেরক যা মানগুলিতে প্রবাহিত করে। এটি এটির গ্রাহকদের কাছে এই মানগুলির পর্যবেক্ষণযোগ্য ট্রান্সমিশন।

সুতরাং আমরা ইনপুটটির বর্তমান মান অ্যাক্সেস করতে পর্যবেক্ষণযোগ্য প্রবাহ এবং পর্যবেক্ষণযোগ্য প্রপ comb একত্রিত করি।

কম্বাইন ফসল কাটা এখানে ভাল পছন্দ।

চিকেন এবং ডিমের সমস্যা

কম্বিনেস্টেস্ট ব্যবহার করতে, উভয় স্ট্রিম এবং প্রপ e অবশ্যই নির্গত হয়। প্রপ $ নির্গত না হওয়া পর্যন্ত স্ট্রিম নির্গত হয় না এবং বিপরীত হয়।

আমরা স্ট্রিমটিকে প্রাথমিক মান দিয়ে এটি ঠিক করতে পারি।

আরএক্সজেএস থেকে স্টার্টউইট অপারেটরটি আমদানি করুন:

{মানচিত্র, স্টার্টউইথ '' আরএক্সজেএস / অপারেটর 'থেকে আমদানি করুন;

পরিবর্তিত স্ট্রিম ক্যাপচার করতে একটি নতুন ভেরিয়েবল তৈরি করুন।

কনস্ট {হ্যান্ডলার, স্ট্রিম} = createEventHandler ();
কনট মান $ = স্ট্রিম.পাইপ (মানচিত্র (e => e.target.value), ('')) দিয়ে শুরু করুন;

আমরা জানি যে স্ট্রিমগুলি ইনপুট অন চেঞ্জ থেকে ইভেন্ট ছুড়ে। সুতরাং প্রতিটি ইভেন্টকে তাত্ক্ষণিকভাবে তার পাঠ্য মানকে নির্ধারণ করুন।

তদতিরিক্ত, আমরা একটি শূন্য স্ট্রিং হিসাবে "$" মানটি আরম্ভ করি - খালি ইনপুটটির জন্য উপযুক্ত ডিফল্ট মান।

সব একত্রিত

আমরা এই দুটি স্ট্রিম সংযুক্ত করতে প্রস্তুত এবং অপারেটরের পরিবর্তে বিল্ড পদ্ধতি হিসাবে কম্বাইনএলটেস্ট আমদানি করি।

'Rxjs' থেকে আমদানি করুন {কম্বাইনএলটেস্ট;

আপনি ট্যাপ অপারেটরটি মানগুলি প্রদর্শিত হচ্ছে তা পরীক্ষা করতে আমদানি করতে পারেন:

{মানচিত্র, স্টার্টউইথ, আলতো চাপুন '' আরএক্সজেএস / অপারেটর 'থেকে আমদানি করুন;

এবং এটি এর মতো ব্যবহার করুন:

কনট অ্যাপ = উপাদানফ্রিমস্ট্রিম (প্রোপ $ => {কনস্ট {হ্যান্ডলার, স্ট্রিম} = createEventHandler (); কনস্ট মান $ = স্ট্রিম.পাইপ (মানচিত্র (e => e.target.value)), ('')) দিয়ে শুরু করুন;
সম্মিলনতম (প্রপ $, মান $) প্রদান করে। পাইপ (ট্যাপ করুন (কনসোল.ওয়ার্ন)), মানচিত্র (() => ( )))});

আপনি টাইপ করার সাথে সাথে, [প্রপস, মান] লগ হয়েছে।

ব্যবহারকারীর উপাদান

এই উপাদানটি আমরা যে ব্যবহারকারীর নাম দিয়েছি তা পাওয়ার / প্রদর্শনের জন্য দায়ী। মানটি অ্যাপ্লিকেশনটির দ্বারা প্রাপ্ত হয় এবং একটি এজেএক্স কলকে বরাদ্দ করা হয়।

জেএসএক্স / সিএসএস

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

একটি ফোল্ডার এসসিআর / ব্যবহারকারীর তৈরি করুন এবং এই কোডটি ব্যবহারকারীর CSS এ আটকান:

এবং এই কোডটি এসআরসি / ব্যবহারকারী / উপাদান / জেজে:

উপাদানটি কেবল গিটহাব এপিআই থেকে স্ট্যান্ডার্ড জেএসএন প্রতিক্রিয়া সহ একটি টেম্পলেট পূরণ করে।

পাত্রে

এখন যেহেতু "বোকা" উপাদানটি বাইরে চলে গেছে, আসুন "স্মার্ট" উপাদানটি করুন:

এখানে src / ব্যবহারকারী / সূচক.জেএস:

আমদানি 'প্রতিক্রিয়া' দ্বারা প্রতিক্রিয়া; 'রিকম্পোজ' থেকে আমদানি করুন {উপাদানফ্রিমস্ট্রিম; 'আরএক্সজেএস / অপারেটর' থেকে আমদানি করুন {ডিবাউনটাইম, ফিল্টার, কার্ড, প্লাক; '। / কম্পোনেন্ট' থেকে উপাদান আমদানি করুন; আমদানি করুন './User.css';
কনস্ট ব্যবহারকারীর = উপাদানফ্রিমস্ট্রিম (প্রোপ $ => get কনট গেম ইউজার $ = প্রোপ $। পাইপ (ডিবাউনটাইম (1000), প্লাক ('ব্যবহারকারী'), ফিল্টার (ব্যবহারকারী => ব্যবহারকারী ও& ব্যবহারকারীর দৈর্ঘ্য), মানচিত্র (ব্যবহারকারী => ( {ব্যবহারকারী )));
রিটার্ন getUser $; });
রপ্তানি মান ব্যবহারকারী;

আমরা ব্যবহারকারীকে একটি উপাদান হিসাবে স্ট্রিম স্ট্রিম হিসাবে সংজ্ঞায়িত করি, যা একটি প্রপম - প্রবাহকে দেয় a বরাদ্দ

ডিবাউনটাইম

যেহেতু ব্যবহারকারী কীবোর্ডের মাধ্যমে তার প্রপসগুলি গ্রহণ করে, তাই আমরা প্রতিটি একক নির্গমন শুনতে চাই না।

যখন ব্যবহারকারী টাইপ করা শুরু করবেন, ডিবনটাইম (1000) 1 সেকেন্ডের জন্য সমস্ত নির্গমন এড়িয়ে যাবে। এই প্যাটার্নটি প্রায়শই অগ্রিম কলগুলিতে ব্যবহৃত হয়।

টুকরো টুকরো করা

এই উপাদানটি কোনও পর্যায়ে প্রো.উসারের আশা করে। ব্যবহারকারীর কাছে পৌঁছে যায় যাতে প্রতিবার আমাদের প্রপসটি ধ্বংস করতে না হয়।

ছাঁকনি

নিশ্চিত করে যে ব্যবহারকারীর উপস্থিতি আছে এবং খালি স্ট্রিং নয়।

মানচিত্র

প্রথমে ব্যবহারকারীকে প্রবেশ করান -দিন.

সংযোগ করুন

Src / index.js এ ব্যবহারকারীর উপাদানটি আমদানি করুন:

'./User' থেকে ব্যবহারকারী আমদানি করুন;

এবং একটি ব্যবহারকারী হিসাবে একটি মান লিখুন:

সম্মিলনতম (প্রপ $, মান $) প্রদান করে। পাইপ (ট্যাপ করুন (কনসোল.ওয়ার্ন)), মানচিত্র (([প্রপস, মান]) => (
)));

1 সেকেন্ডের পরে আপনার মানটি স্ক্রিনে প্রদর্শিত হবে।

শুভ সূচনা, তবে আমাদের ব্যবহারকারীটি পাওয়া দরকার।

ব্যবহারকারী পান

গিটহাবের ব্যবহারকারীর এপিআইটি https://api.github.com/users/$ জেনালোগুলি ব্যবহারকারী at এ উপলব্ধ} আমরা সহজেই এটি ব্যবহারকারী / সূচক.জেজে কোনও সহায়ক ফাংশনে সরিয়ে নিতে পারি:

কনস্টেট বিন্যাসUrl = ব্যবহারকারী =>> https://api.github.com/users/rs {ব্যবহারকারী {`;

ফিল্টারের পরে এখন আমরা কার্ড (ফর্ম্যাটআরএল) যুক্ত করতে পারি:

আপনি এপিআই শেষ পয়েন্টটি স্ক্রিনে 1 সেকেন্ডের পরে উপস্থিত দেখতে পাবেন:

তবে আমাদের একটি এপিআই অনুরোধ করতে হবে! এখানে সুইচম্যাপ এবং এজাক্স আসে।

সুইচম্যাপ

প্রিভিউতে সুইচম্যাপ ব্যবহার করা হয়।

ধরা যাক যে ব্যবহারকারী একটি ব্যবহারকারীর নাম প্রবেশ করে এবং আমরা এটি সুইচম্যাপে টানতে।

ফলাফল ফিরে আসার আগে যদি ব্যবহারকারী কোনও নতুন কিছু টাইপ করেন? পূর্ববর্তী এপিআই উত্তরে আগ্রহী?

না

সুইচম্যাপ পূর্ববর্তী আনয়ন বাতিল করে এবং বর্তমানটিতে ফোকাস করে।

আজাক্স

আরএক্সজেএস অ্যাজাক্সের নিজস্ব বাস্তবায়ন প্রস্তাব করে, যা সুইচম্যাপের সাথে দুর্দান্ত কাজ করে!

তাদের ব্যাবহার করুন

উভয় আমদানি করা যাক। আমার কোডটি এর মতো দেখাচ্ছে:

'rxjs / ajax' থেকে import আজাক্স import আমদানি করুন; 'আরএক্সজেএস / অপারেটর' থেকে 'আমদানি করুন ounce ডিবাউনটাইম, ফিল্টার, মানচিত্র, প্লাক, সুইচম্যাপ;;

এবং এটি এর মতো ব্যবহার করুন:

কনস্ট ইউজার = কম্পোনেন্টফ্রিমস্ট্রিম (প্রোপ $ => get কনট গেম ইউজার $ = প্রোপ $। পাইপ (ডাবনউসটাইম (1000), প্লাক ('ইউজার'), ফিল্টার (ইউজার => ইউজার অ্যান্ড ইউজারলেন্থ), কার্ড (ফর্ম্যাটআরল), সুইচম্যাপ ( url => ajax (url)। পাইপ (প্লাক ("উত্তর"), মানচিত্র (উপাদান)));
রিটার্ন getUser $; });

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

আমরা একটি ফলাফল আছে!

ত্রুটি পরিচালনা

বিদ্যমান নেই এমন একটি ব্যবহারকারীর নাম প্রবেশ করার চেষ্টা করুন।

এমনকি যদি আপনি এটি পরিবর্তন করেন তবে আমাদের অ্যাপ্লিকেশনটি নষ্ট হয়ে গেছে। আরও ব্যবহারকারী পেতে আপনাকে আপডেট করতে হবে।

এটি একটি খারাপ ব্যবহারকারীর অভিজ্ঞতা, তাই না?

ক্যাচআরার

ক্যাচআরআর অপারেটর দিয়ে, আমরা এটি লক্ষ্য না করে বাধা দেওয়ার পরিবর্তে স্ক্রিনে উপযুক্ত প্রতিক্রিয়া জানাতে পারি।

এটি আমদানি করুন:

'আরএক্সজেএস / অপারেটর' থেকে আমদানি করুন {ক্যাচআরার, ডিবাউনটাইম, ফিল্টার, মানচিত্র, প্লাক, সুইচম্যাপ;

এবং এটি আপনার অ্যাজাক্স চেইনের শেষ পর্যন্ত আঠালো করুন।

সুইচম্যাপ (ইউআরএল => এজ্যাক্স (ইউআরএল)। পাইপ (প্লাক ("প্রতিক্রিয়া")), মানচিত্র (উপাদান), ক্যাচআরার (({প্রতিক্রিয়া}) => সতর্কতা (প্রতিক্রিয়া me ম্যাসেজ)))

কমপক্ষে আমরা প্রতিক্রিয়া পাই তবে আমরা আরও ভাল করতে পারি।

একটি ত্রুটি উপাদান

একটি নতুন উপাদান তৈরি করুন, src / ত্রুটি / index.js।

আমদানি 'প্রতিক্রিয়া' দ্বারা প্রতিক্রিয়া; ত্রুটি ত্রুটি = ({উত্তর, স্থিতি}) => ( উফফফফ! {status}: {response.message} {স্থিতি}:। প্রতিক্রিয়া.ম্যাসেজ} অনুগ্রহপূর্বক আবার চেষ্টা করুন. ); রপ্তানি মান ত্রুটি;

এটি আমাদের এজেএক্স কল থেকে প্রতিক্রিয়া এবং স্থিতি দেখায়।

আসুন এটি ব্যবহারকারী / index.js এ আমদানি করুন:

'../Error' থেকে আমদানি ত্রুটি;

এবং আরএক্সজেএস থেকে:

'rxjs' থেকে {এর import আমদানি করুন;

মনে রাখবেন, আমাদের উপাদান থেকে স্ট্রিম কলব্যাক অবশ্যই একটি পর্যবেক্ষণযোগ্য ফিরে আসতে হবে return আমরা ভন দিয়ে এটি অর্জন।

নতুন কোডটি এখানে:

আজাক্স (ইউআরএল)। পাইপ (প্লাক ("উত্তর"), কার্ড (উপাদান), ক্যাচআরার (ত্রুটি => এর ( )))

কেবল আমাদের উপাদানগুলিতে প্রোপ হিসাবে ত্রুটিযুক্ত বস্তুটি বিতরণ করুন।

এখন যদি আমরা আমাদের ইউআই পরীক্ষা করি:

অনেক ভাল!

চার্জ সূচক

সাধারণত আমাদের এখন এক ধরণের রাজ্য প্রশাসন প্রয়োজন। আপনি কীভাবে লোড ইন্ডিকেটর সেট আপ করবেন?

সেটস্টেটে পৌঁছানোর আগে, আরএক্সজেএস আমাদের সহায়তা করতে পারে কিনা তা আপনার বিবেচনা করা উচিত।

পুনরায় রচনা ডকুমেন্টগুলি আমাকে এই লাইনগুলি ধরে ভাবতে বাধ্য করেছে:

সেটস্টেট () এর পরিবর্তে একাধিক স্ট্রিম একত্রিত করুন।

সম্পাদনা করুন: আমি প্রথমে বিহেভিয়ারসুবেক্টস ব্যবহার করেছিলাম, তবে ম্যাটি ল্যাঙ্কিনেন এই কোডটি সহজ করার জন্য একটি দুর্দান্ত পদ্ধতিতে প্রতিক্রিয়া জানিয়েছিলেন। থ্যাঙ্কস ম্যাটি!

মার্জ অপারেটর আমদানি করুন।

আমদানি করুন {মার্জ} 'আরএক্সজেস';

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

উপাদান থেকে স্ট্রিম স্ট্রিম:

কনস্ট ব্যবহারকারী = উপাদানফ্রিম স্ট্রিম (প্রোপ $ => {কনস্ট লোডিং $ = এর ( ভার ... ); কনট গেট ইউজার $ = ...

একটি সাধারণ এইচ 3 চার্জ সূচকটি পর্যবেক্ষণযোগ্য হয়ে উঠল! এবং এটি এর মতো ব্যবহার করুন:

কনস্ট লোডিং of = এর ( ভার ... );
কনস্ট getUser $ = প্রোপ $। পাইপ (ডিবাউনটাইম (1000), প্লাক ('ব্যবহারকারী'), ফিল্টার (ব্যবহারকারী => ব্যবহারকারী && ব্যবহারকারীর দৈর্ঘ্য), কার্ড (ফর্ম্যাটআরল), সুইচম্যাপ (url => মার্জ (load লোড হয়েছে, এজাক্স (url)। পাইপ (প্লাক ("উত্তর"), কার্ড (উপাদান), ক্যাচআরার (ত্রুটি => এর ( )))))));

আমি এটি কতটা কাছাকাছি ভালবাসে। স্যুইচম্যাপকে কল করার সময়, লোডিং $ এবং অ্যাজাক্স পর্যবেক্ষণগুলিকে মার্জ করুন।

যেহেতু লোডিং $ একটি স্ট্যাটিক মান, এটি প্রথমে মুদ্রিত হয়। অ্যাসিঙ্ক্রোনাস অ্যাজাক্স শেষ হওয়ার সাথে সাথে, এটি আউটপুট এবং স্ক্রিনে প্রদর্শিত হবে।

পরীক্ষার আগে, আমরা বিলম্ব অপারেটরটি আমদানি করতে পারি যাতে ট্রানজিশনটি খুব দ্রুত ঘটে না।

'আরএক্সজেএস / অপারেটর' থেকে 'আমদানি করুন {ক্যাচআরার, ডিবিউনটাইম, বিলম্ব, ফিল্টার, মানচিত্র, প্লাক, সুইচম্যাপ, আলতো চাপুন;

এবং এটি মানচিত্রের (কম্পোনেন্ট) ঠিক আগে ব্যবহার করুন:

আজাক্স (ইউআরএল)। পাইপ (প্লাক ("উত্তর"), বিলম্ব (1500), কার্ড (উপাদান), ক্যাচআরার (ত্রুটি => এর ( )))

আমাদের ফলাফল?

আমি অবাক হয়ে দেখি যে এই প্যাটার্নটি কতদূর নেওয়া উচিত এবং কোন দিকে। একটি মন্তব্য এবং আপনার চিন্তা ভাগ করুন!

এবং যে তালি বোতামটি রাখা মনে রাখবেন। (আপনি 50 পর্যন্ত যেতে পারেন!)

পরবর্তী সময় পর্যন্ত।

মাইন্ড, ভীত বজাদোফ http://yazeedb.com/