# مدیریت state
یکی از مسائل مهم در تولید اپلیکیشن‌های وب، مدیریت داده‌ها و state هست. توی پروژه کوچیک میشه این state رو داخل کامپوننت‌ها ذخیره کرد، اما وقتی پروژه بزرگ میشه این راه حل به مرور کارایی خودش رو از دست میده و ادامه‌ی پروژه به این روش با افزایش نمایی پیچیدگی روبرو خواهد شد. برای مثال وقتی یک state خاص لازمه که توی چندین کامپوننت مختلف استفاده بشه، مجبوریم اون رو در اولین والد مشترک اون کامپوننت‌ها قرار بدیم و بعداً از طریق props به کامپوننت‌های فرزند بفرستیم. و اگه قرار باشه کامپوننت‌ها نیاز به تغییر این state داشته باشن باز مجبوریم یه سری handler به پایین بفرستیم. اگه این کامپوننت‌ها در عمق زیادی قرار داشته باشن باید از هر کامپوننت به کامپوننت فرزند بعدی ارسال بشن که همونطور که گفته شد وقتی پروژه بزرگ باشه این مساله خیلی پیچیدگی و اضافه‌کاری زیادی توی کد به وجود میاره.
یک راه حل معروف برای این مشکل الگوی معماری Flux هست که توسط کتابخونه‌هایی مثل Redux پیاده‌سازی شده. راجع به معماری فلاکس این لینک رو بخون.همچنین راجع به Redux این لینک‌ها رو بخون:
البته غیر از redux کتابخونه‌های دیگه هم مثل MobX و Rematch نوشته شدن که اولی مفهومی کاملا متفاوت داره و بر اساس الگوی observable state نوشته شده و دومی یک سطح انتزاع روی redux هست که باعث کاهش boilerplate میشه. فعلا جهت یادگیری بهتر توصیه میشه صرفا با redux کار کنی تا مفاهیم رو از اول و به شکل اصولی یاد بگیری بعداً میتونی سراغ این کتابخونه‌های دیگه هم بری.
# redux-thunk
با توجه به اینکه معماری Flux با فرض synchronous بودن همه فراخوانی‌ها طراحی شده، اگر قرار باشه actionها بصورت asynchronous اجرا بشن، نیاز به کتابخونه redux-thunk هم خواهی داشت. برای توضیحات بیشتر این لینک رو ببین.
در ادامه‌ی پروژه کتابخونه‌های redux ، react-redux و redux-thunk رو به پروژه اضافه کن، و پیاده‌سازی‌های فعلی رو اگر جایی لازم میدونی state رو به redux منتقل کن.
مثلاً موارد زیر میتونن به redux منتقل بشن:
لیست پست‌ها و متنشون میتونن داخل استور باشن، هر بار که صفحه لیست باز میشه این لیست داخل استور آپدیت بشه اما تا زمانی که آپدیت نشده لیست قدیمی نشون داده بشه. دفعه اول که لیست خالیه loading نشون بده.
در صفحه‌ی پست اگر لیست پست‌ها از پیش گرفته شده بود، از دیتای ذخیره شده در store برای نمایش اون پست استفاده بشه، در غیر این صورت مشابه وضعیت قبلی ریکوئست بزنه و دیتای پست رو بگیره و نمایش بده.
# امکان جستجو در پست‌ها
در داخل وبلاگی که نوشتی، سمت چپ بالای لینک‌های بلاگ یه باکس جدید با عنوان جستجو اضافه کن و داخلش یه فیلد جهت جستجوی بلاگ‌ها بذار. کاربر وقتی مقدار جدیدی وارد کرد و enter رو زد باید به یه صفحه‌ی search که توی روتر تعریف میکنی منتقل بشه و پارامتر q به مقدار جستجو شده ست بشه.
در صفحه جستجو باید یه request به آدرس زیر زده بشه که لیست بلاگ‌های محتوی اون رشته رو برمیگردونه:
localhost:3000/posts?q=[term]
اونوقت لیست این نتایج رو در ستون سمت راست (جایی که لیست پست‌های بلاگ نمایش داده می‌شدند) نشون بده و در داخل عنوان و متن پست‌های پیدا شده، هر جا رشته‌ی جستجو شده وجود داشت اون رو بصورت هایلایت زرد رنگ نشون بده. در ضمن داخل باکس جستجو و درست زیر فیلد مربوط به جستجو لیستی از آخرین ۵ رشته‌ی جستجو شده رو نشون بده که با کلیک کردن روی اونها دوباره جستجو بشن و صفحه لیست نتایج آپدیت و نمایش داده بشه.
برای پیاده‌سازی این امکانات نیاز داری که هر بار مقداری جستجو میشه اون رو داخل redux ذخیره کنی و همیشه لیستی از ۵ عبارت جستجو شده آخر رو هم همیشه داشته باشی. عبارت جستجو شده‌ی فعلی موقع باز شدن صفحه search آپدیت میشه (یه action باید dispatch بشه) و بعدا مقدار اون داخل کامپوننت لیست بلاگ‌ها باید استفاده بشه تا مقدار جستجو شده رو همه جا بتونی هایلایت کنی.
در نظر داشته باش کاربر ممکنه لینک صفحه جستجو رو همراه با پارامتر q داخل آدرس‌بار تایپ کنه، در این صورت غیر از اینکه جستجو بر اساس اون انجام میشه، لیست آخرین ۵ عبارت جستجو شده هم باید آپدیت بشه.