تمرین کار با React Redux با یک پروژه فروشگاهی جذاب :)
خب ما از https://fakestoreapi.com به عنوان یک API برای تولید اطلاعات الکی استفاده می کنیم!
در کد ProductListing که ProductComponent هامون رو توش نشون می دیم. این اطلاعات را از API دریافت می کنیم.(به صورت پیشفرض 20 محصول می باشد) دریافت اطلاعات در یک روند async با axios صورت می پذیرد و بعد از دریافت صحیح توسط dispatch می تونیم State رو تغییر بدهیم. همچنین به وسیله useEffect نیز مشخص می کنیم که دریافت اطلاعات فقط در رندر اولیه صورت پذیرد.
همچنین Reducer مون رو هم به صورت زیر آپدیت می کنیم.
کامپوننت ProductComponent.js رو به شکل زیر آپدیت می کنیم. همانطور که عرض کردم برای نوشتن UI از Bootstrap استفاده شده است.
صرفا برای زیباتر شدن کد Header.js رو هم بدین شکل بهترش کردم.
کد App.scss من هم بدین شکل است:
خروجی کدمون تا بدین جا
خب رفقا خسته نباشید، قولنج انگشتانتون رو بشکنید تا بریم ادامه ماجراجویی!
حالا می خواهیم بعد از اینکه روی هر محصول کلید کردیم به صفحه خرید یا جزئیات اون محصول بریم. در وهله اول باید روی هر محصول که کلید می کنیم به route مدنظر رود، برای اینکار باید از Link در ProductComponent استفاده کنیم.
تا الان ما یک Reducer داشتیم و یک action که وظیفه تعیین product ها را داشتند. حال می خواهیم بفهمیم روی چه product ای کلید شده، ما با Redux اینکار رو انجام می دهیم. بدین منظور یک Reducer جدید به فایل productsReducer.js مون اضافه می کنیم.
همچنین به فایل index.js مون
حالا صفحه ProductDetail رو می سازیم. خب اول با useParams که مربوط به مبحث router ها می باشد، مقدار productId رو می گیریم. بعد اطلاعات گرفته شده از API رو که مربوط به جزئیات محصول می باشد، dispatch کرده و state رو تغییر می دهیم.
همچنین از useEffect استفاده می کنیم تا در صورتی که productId آپدیت شده و موجود می باشد fetch و متعاقبا dispatch صورت پذیرد.
ساخت UI نیز نکته خاصی نداره، فقط ابتداش بررسی کردیم که product اگر موجود نیست Loading رو نشون بده.
خسته نباشید پروژه مون تموم شد!
راستی یه باگ کوچولو پروژه ما داره، اونم اینه که وقتی روی یک محصول کلید می کنی و بعد برمیگردی به صفحه اولیه و یک محصول جدید رو انتخاب می کنی، محصول قبلی برای چند ثانیه نشون داده میشه. این به این علته که محصول قبلی هنوز توی store هستش و باید پاکش کنیم.
اول یک action جدید به productsActions.js می افزاییم
بعد فایل productsReducer.js رو متعاقبا آپدیت می کنیم.
نهایتا تغییرات زیر را نیز در ProductDetails.js انجام می دهیم
خب درست شد!
همچنین با افزونه ای که در بخش قبل معرفی کردیم می تونید از صحت ترتیب action ها و عملکرد redux مطمئن شوید
خب دوستان خسته نباشید، مسیر یکم طولانی بود ولی انجامش دادیم!
فایل کامل پروژه در این آدرس قرار داده شده است. اگر اشکال یا سوال یا ایرادی در ارتباط با پروژه بود بهم بگید حتما!
