تمرین کار با React Redux با یک پروژه فروشگاهی جذاب :)
اول از همه بگم که اگر با Redux آشنا نیستید، می تونید یه سر به این آموزش بزنید!
در این پروژه با مفاهیم زیر کار می کنیم.
در این پروژه جذاب یک فروشگاه به کمک Redux می سازیم که از API برای گرفتن اطلاعاتش کمک می گیره. خب اول از همه یک پروژه می سازیم و پکیج های مدنظر خودمون رو توش نصب می کنیم، من برای ساخت UI از Bootstrap5 و sass استفاده می کنم که برای شما می تونه فرق کنه بسته به اینکه با چی UI می زنید.
npx create-react-app react-redux-ecommerce cd react-redux-ecommerce npm install axios react-router-dom redux react-redux bootstrap sass
حالا یکم پروژه مون رو خلوت می کنیم و کد های زیر رو حذف می کنیم.(اینو بگم که من از ویرایشگر Atom تحت Lubuntu استفاده می کنم که البته برای شما می تونه هر چیز دیگری باشه)
حالا فایل index.js مون رو هم خلوت می کنیم تا بدین شکل بشه (در انتهای بخش دوم سورس کد پروژه موجود است)
فایل App.js مون هم بدین شکل مختصرش می کنیم
خب برو بریم!
یکی از مهم ترین کارها برای شکیل تر شدن کدتون در React ساختاربندی مناسب پروژه هست. بدین منظور داخل پوشه src یک پوشه به نام components درست می کنیم و یه پوشه به نام redux که داخل پوشه redux سه فولدر actions و constants و reducers رو می سازیم و یک فایل store.js می سازیم.
یک فایل به نام action-types.js در فولدر constants ایجاد می کنیم و ثابت های زیر را قرار می دهیم. (نگران نباشید! جلوتر که بریم براتون واضحتر میشه مطالب)
خب حالا یک فایل به نام productsActions.js داخل فولدر actions ایجاد می کنیم. اگر بخوام یه یادآوری از Redux کنم، باید بگم که action به ما در آپدیت state ها کمک می کرد که type نوع تغییر و payload ورودی فرآیند تغییر است! (واضح تر میشه بریم جلوتر!)
خب حالا نوبت به Reducer میرسه که وظیفه انتقال state ها به store رو داره، بنابراین داخل فولدر reducers یه کد به اسم productsReducer.js ایجاد می کنیم. فعلا یه initialState الکی می گذاریم و بعدا با API جایگزینش می کنیم.
حال یک فایل index.js درون پوشه reducers ایجاد می کنیم که تمامی reducer هامون رو تجمیع کنیم. البته ما در این پروژه فقط یک reducer داریم ولی به طور کلی برای ساختاربندی صحیح پروژه پیشنهاد می شود از متد combineReducers استفاده کنید.
حالا کد store.js مون رو بدین شکل ویرایش می کنیم. یک store می سازیم که reducers اون رو در index ساختیم و از یک افزونه redux برای مرورگرها کمک می گیریم که در ادامه بهمون کمک می کنه.
خب حالا برای اینکه کل App مون به store دسترسی داشته باشه از Provider استفاده می کنیم. کد index.js مون به شکل زیر می شود.
خب حالا اگر localhost رو اجرا کنید و اکستنشن redux رو که گفتم برای مرورگرتون نصب کنید. می تونید state های برنامه رو ببینید.
تا حالا کلی چیز میز آماده کردیم، نوبت اینه که بریم Component هامون رو ایجاد کنیم و چیزهایی هم ببینیم!
چهار تا Component رو توی پوشه components ایجاد می کنیم و به مرور با محتوای خودمون پرشون می کنیم. اسم این کامپوننت ها Header.js و ProductListing.js و ProductDetails.js و ProductComponent.js هستش.
حالا فایل App.js رو به عنوان محل تجمیع کامپوننت ها به صورت زیر ویرایش می کنیم. توجه به این نکته لازم است که ما از React Route استفاده می کنیم. همچنین فایل App.css هم به App.scss تغییر نام دادم.
حالا فایل ProductListing.js رو به شکل زیر ویرایش کرده و کامپوننت ProductComponent رو در اون قرار میدهیم.
حالا در ProductComponent.js ما توسط useSelector از فروشگاه state ها رو می گیریم و بعد بوسیله bootstrap یک card می سازیم تا موقتا تنها product ما را نشان دهد.
خب در جلسه بعدی product هامون رو از یک API دریافت می کنیم و برناممون رو می سازیم.
پس فعلا!
