در این آموزش قصد داریم نحوه پیاده سازی سبد خرید رو در سایت فروشگاهی توسط دو کتابخانه پر قدرت Redux و React Redux به شما آموزش بدهم .
سلام به همراهان گلم . امروز قصد دارم یکی از مباحث مهم در طراحی سایت ها ، علی الخصوص سایت هایی که قصد فروش محصول یا خدمات رو دارند و میخواهند سبد خرید رو به سایتشون اضافه کنند آموزش بدم . احتمالا در تولید و طراحی سایت در ری اکت برای پیاده سازی سبد خرید به اسم Redux برخورد کردید ؟! خوب هیچ چیز سختی نیست . از اون چیزی فکر میکنید ساده تر و جذاب تر هست . سبد خریدی که قرار هست با هم ایجاد کنیم مثل همه سایتهای فروشگاهی به این صورت کار میکنه که با کلیک روی افزودن به سبد از هر صفحه ای توی سایت محصول به سبد اضافه بشه و از هر جایی بتونیم به سبد دسترسی داشته باشیم و همچنین اگر تب جدیدی در مرورگر باز کردیم اطلاعات سبد در اون تب هم نمایش داده بشه . پس با من همراه باشید تا با هم یک سبد خرید ساده ولی کاملا عملیاتی و کاربردی رو پیاده کنیم . دقت داشته باشید در این آموزش تمرکزی روی استایل و زیبایی نداریم و صرفا هدف ، پیاده سازی سبد خرید هست .
ما در این سایت برای همه آموزش ها و طراحی ها از محیط کد نویسی Visual Studio Code استفاده میکنیم . فرض ما بر این هست که شما با نحوه استفاده از این محیط آشنا هستید و فقط نیاز دارید با پیاده سازی سبد سفارش در سایت توسط ری اکت آشنا بشید .
پس ابتدایک پروزه React رو ایجاد میکنیم . توسط چی ؟ معلومه دستور معروف
npx create-react-app samplecart
اگر که هنوز create-react-app رو نصب نکردید ابتدا این دستور رو اجرا کنید
npm i -g create-react-app
اون اسم samplecart چی هست ؟ اسم پروژه ما هست که باید بعد از فرمان create-react-app نوشته بشه و نباید همنام با ماژولهای مورد استفاده در پروژه باشه . بعد از اجرای این دستور فولدری با همین نام در مسیر مشخص شده ایجاد میشه . اکی ؟
بعد از اجرای دستور ساخت پروژه ری اکت یک مقدار صبر میکنیم تا همه ماژول های مورد نیاز نصب بشن . سپس فولدری رو که با نام پروژه یعنی samplecart ساختیم رو از منو File/Open Folder انتخاب میکنیم
خوب الان نیاز داریم که ماژول های مورد استفاده در پروژه رو نصب کنیم . نحوه استفاده ماژول ها رو در طول آموزش بهتون توضییح میدم . ماژولی مثل بوت استرپ رو فقط برای استایل دهی استفاده میکنیم و چون به موضوع آموزش مرتبط نمیشه میتونید در فایل کدها نحوه استفاده از اون رو ببینید .
درون ترمینال که توسط کلید میانبر Ctrl + ` (کنترل + بک تیک ) فعال میشه ، دستور زیر رو اجرا کنید
npm i redux react-redux bootstrap
به زبون ساده وقتی قصد دارید توی پروژه ری اکت مقادیری رو بین کامپوننت ها رد و بدل کنید ، اگر در حد یکی دو کامپوننت داشته باشید که هیچ ولی وقتی تعداد اونها زیاد شد و کامپوننت ها تو در تو شدن ، اونوقته که نیاز دارید از این دو ماژول استفاده کنید . استفاده زیادی میشه از اونها کرد . به طور مثال اطلاعاتی رو که در طول اجرای برنامه نیاز دارید که از سرور گرفته بشه و ثابت هست مثل اطلاعات کاربر پس از لاگین ، خوب میتونید این اطلاعات رو در مخزنی که توسط ریداکس ایجاد میشه ذخیره و در هر جای سایت که خواستید به راحتی فراخوانی کنید . اینطوری دیگه نیاز ندارید برای بدست آوردن برخی اطلاعات مدام درخواست رو به سمت سرور ارسال کنید یکبار دریافت و ذخیره میکنید و هر بار دوست داشتید از مخزن دریافت میکنید .یاتون باشه به مقادیر ارسالی در ری اکت props گفته میشه و در واقع شما دارید props رو رد و بدل میکنید .حالا کار هر کدوم چی هست ؟ redux وظیفه ایجاد مخزن و مدیریت اون رو داره و react redux همونطور که از اسمش مشخصه وظیفه اتصال redux به react رو داره تا با ایجاد این اتصال شما بتونید هر مقداری رو از هر کامپوننتی به هر کامپوننت دیگه ای ارسال کنید .
شما میتوانید ادامه مقاله ایجاد سبد خرید در ری اکت توسط ماژول Redux را در سایت نیلو تک در بخش آموزش مطالعه بفرمائید
درباره این سایت