نوشته های علیرضا شهابی

خداحافظی با Redux در 10 خط کد (‌ useReducer + Context API )

علیرضا شهابی — Fri, 03 Jul 2020 13:35:40 +0430

با سلام به همه دوستان امیدوارم که تو این روز های کرونایی حال همتون خوب باشه ‌, این روزا بین برنامه نویس های React js خیلی باب شده که میتونیم دیگه از `Redux` استفاده نکنیم و به جای اون از `Context API` و `useReducer` استفاده کنیم. برای اینکه بهتر بتونید متوجه بشید باید یه دانش نسبی از مباحث Hooks و Redux داشته باشید که پیشنهاد میکنم این پست هارو بخونید و بعدش به ادامه مسیر ادامه بدین. https://virgool.io/iran-react-community/react-context-api-xoxyjtbvzdqp خیلی عالیه ولی یه سری سوال پیش میاد که ما میتونیم چند تا Reducer هم کنار همدیگه به صورت Sync داشته باشم ؟ یا مثلا چطوری میتونیم از Wrapper Hell توی پروژمون جلوگیری کنیم یا ازین دست مساعل ...A wrapper hell is like :--- ------ --------- ------------ And So on..--------- ------ --- خوب بنظرم برای اینکه بهتر متوجه بشید من یه پروژه خیلی ساده با Redux میاریم بالا بعدش بعد ازینکه با ساختارش آشنا شدیم میایم و عین همون رو با `useReducer` , `Context API` میسازیم. کد بزنیم ?.حالا شروع میکنیم به ساخت یه پروژه ساده با Redux : اول از همه باید Provider و Store رو به پروژه اضافه کنیم.در مرحله بعدی باید `rootReducer` رو ایجاد کنیم.و در مرحله آخر `Action` ها رو ایجاد میکنم .خوب الان ما یک پروژه ساده با Redux بالا آوردیم و میتونیم ازش استفاده کنیم.خوب حالا بریم برای ساخت همین ساختار با استفاده از Context API و useReduder.فقط قبل از شروع پیشنهاد میکنم که حتما پست زیر رو بخونید تا درک بهتری از hook ها و مخصوصا useReducer پیدا کنید . https://virgool.io/iran-react-community/react-hooks-gnhzymcx21sf مرحله اول با استفاده از Context API یک StateProvider میسازیم به این شکل .StateProvider.jsخوب تو این مرحله ما یک StateContext ساختیم و از روی اون یک Provider به نام StateProvider ساختیم که value اون useReducer هست که کارش اینکه یک Reducer و initialState میگیره و به ما state و dispatch برمیگردونه. مرحله بعدی اینه که میایم و rootReducer رو میسازیم که من برای اینکه راحت تر باشید اول reducer های مختلف رو براتون مینویسم و بعدش میریم سراغ rootReducer .reducers.jsهمون طور که میبینید عین همون حالت قبلیه ولی فقط برای توابعی که داریم اسم های userReducer , countReducer رو قرار دادیم. حالا rootReducer ما یه چنین شکلی داره :rootReducer.jsخوب همون طور که میبیند برای اینکه به userReducer و countReducer ما همون state برسی که ما نیاز داریم به این شکل اومدیم state رو destruct کردیم.حالا در مرحله آخر برای استفاده ازین StateProvider کافیه که اون روی App.js خودمون Wrap کنیم و با استفاده از useStateValue که ساختیم بیایم و از state , dispatch که به عنوان خروجی بهمون میده استفاده کنیم .useStateValue.jsو تماااام حالا برای اینکه بتونید درک بهتری از موضوع پیدا کنید یه دمو براتون گذاشتم که قشنگ بتونید یه تنی به کد بزنید.دمو . https://codesandbox.io/s/react-contextapi-reducer-8s6k1?autoresize=1&fontsize=14&hidenavigation=1&theme=dark جمع بندی ?. خب من فعلا تو این پست قصد ندارم بگم که اصن اینکار کار درستیه یا نه ولی صرفا تجربه جالبیه چون هم توی این مسیر تونستین تجربه خوبی در استفاده از Context , useContext , useReducer ها بدست بیاورید.و در آخر ممنون میشم که اگر این پست رو تا آخر خوندین نظر خودتون رو به عنوان خواننده بگید که من هم بتونم پیشرفت بیشتری توی نوشتن این مقالات بکنم.

نحوه کار با ? BroadcastChannel API در React JS ?

علیرضا شهابی — Tue, 11 Feb 2020 23:11:58 +0330

با سلام به همه دوستان من علیرضا شهابی هستم چند سالیه که برنامه نویسی رو به صورت حرفه ای دنبال میکنم و خودم رو یک برنامه نویس علاقمند به زبان Javascript میدونم و این پست درباره اینکه چطوری بتونیم Tab هایی که از یک React Application باز میکنیم رو باهم همگام ( Synchronize ) کنیم.پس مثل همیشه اگه نکته مثبت یا منفی توی پست هام میبینید حتما حتما کامنت کنید تا منم بتونم پیشرفت کنم و محتوای با کیفیت تری تولید کنم ?.فقط لازمه که بدونید برای اجرای ریز به ریز موارد پایین نیاز دارین که هم یه دانشی از Hook ها و Protected Routes داشته باشی .که البته من یک مقاله هم در زمینه ساخت Protected Route ها هم دارم که میتونی اول اون رو ازینجا بخونی و بعدش ادامه رو ازینجا داشته باشی ?.خوب بخش اول صرفا یه معرفی ساده از خودم و این پست بود ، حالا بریم که یک وب اپلیکیشن توی React ایجاد کنیم که البته من از typescript به عنوان زبان استفاده میکنم ( اگه با این زبان آشنایی ندارین و بخوام یه تعریف ساده بکنم Javascript + Types )- قبل اینکه بریم تو کار کد ممکنه برای شما سوال بشه که اصن Broadcast Channel چی هست ؟+ به زبون ساده یک کانال ارتباطی بین Tab های Browser ( مرورگر ) شما میسازه ?.- یا اینه که ، ینی چی Tab های ما باهم Synchronize ( همگام ) باشه ؟ + ینی اطلاعات یا عمل هایی که ما روی یک Tab از وب اپلیکشنمون انجام میدیم روی بقیه Tab ها از همون اپلیکیشن هم صورت بگیره .- یا این اصن به چه درد ما میخوره ؟ + مثلا در نظر بگیر که یک پنل داری که وقتی از یکی از Tab هاش میای بیرون ( Logout ) از همه Tab ها خود به خود بیای بیرون ( واااااای خداااااا چقد خفنهههه ?) حالا برای اینکه با این Broadcast Channel بیشتر آشنا بشیم توجه شمارو به این عکس زیر جلب میکنم : توضیحی برای Broadcast Channel همینطور که میبنید این Tab ( بخش های سبز رنگ ) های مختلف ما هستن و با تابع postMessage از طریق کانال ارتباطی که میسازیم ( بخش آبی رنگ ) میتونیم یک داده رو بین Tab هامون مخابره کنیم و با رخ داد ( event ) تابع میتونیم داده مورد نظرمون رو جا به جا کنیم ( حالا قشنگ کدش رو میبینم ?)فقط نباید یادمون بره که این API رو میتونید توی بعضی از Browser ها استفاده کنید که من عکس یک لیست رو براتون آماده کردم .خب حالا بریم قست دوست داشتی ینی دست به کد شدن ( بزن اون دست قشنگه روووو ?)نصب نیاز مندی ها ?.برای شروع ابتدا از دستور خط npx استفاده میکنم .npx create-react-app "YOUR_APP_NAME" --typescriptبعدش باید react-router-dom رو نصب کنید .yarn add react-router-dom @types/react-router-domعلتی که از types@ استفاده میکنیم اینه که میخوایم تحت Typescript کد بزنیم. ( و البته میخوایم که صفحات مختلفی داشته باشیم و تا بتونیم یه دمو قشنگ تر از کاربردش ببینیم ) .خوب با این شیوه پایه اپلیکیشن شما ایجاد شده ( و اینکه این اپ هم از Js و Typescript پشتیبانی میکنه ).قسمت قشنگش اینکه شما برای استفاده ازین API نیاز به هیچ پکیچی نداری ( وااقعا ??)تنها چیزی که نیاز داری بدونی اینه که اینطوری ازین API استفاده میکنن .let channel = new window.BroadcastChannel("YOUR_CHANNEL_NAME")به همین راحتی حالا اون کانال ارتباطی که ما میخوایم ساخته شده ولی چطوری میتونیم توی اپلیکیشن هایی که تحت چارچوب React میسازیم استفاده کنیم رو الان بتون میگم ( ?).کد بزنیم ?.خب شروع کنیم ، اولین چیزی که شما برای این اپلیکیشن نیاز داری بدونی اینه که ما قراره یک اپلیکشن بسازیم که میتونی توش Login , Logout کنی و این Login و یا Logout کردن روی بقیه Tab هایی که اپلیکیشن شما توش بازه هم تاثیر میزاره و همه این ها با کمک Broadcast Channel و React - Router شدنیه .ساختار اپ به این شکله که ما یک صفحه Home داریم و یک صفحه Admin که این صفحه Admin محافظت شده ( Protected ) هستش .شکل - 1 حالا ما میایم یک Hook که اسمش `useAuth` هست رو میسازیم و ازش توی کامپوننت `ProtectedRoute` استفاده میکنیم .که این useAuth به ما سه تابع isLogged , Login و Logout رو بهمون برمیگردونه که ما صرفا از isLogged داخل ProtectedRoute استفاده میکنیم. شکل - 2 خوب اگه بخوایم یه نگاهی به ساختار کد useAuth هم بندازیم به این شکله : شکل - 3و اگه بخوایم یه توضیحی بدیم تابع Login ما یک توکن توی localStrorage ما ذخیره میکنه و کاربر رو به صفحه Admin میبره و تابع Logout کل اطلاعات localStorage مارو پاک میکنه و بعدش مارو به صفحه اصلی میبره و isLogged یه تابعس که به ما میگه کاربر وارد شده یا خیر.و خب الان می خوایم از این BroadcastChannel توی این Hook استفاده کنیم. پس میایم و یک کانال ارتباطی میسازیم و بعدش ازون توی useAuth به این شکل استفاده میکنیم :شکل - 4حالا تابع ما توی توابع Login , Logout یک پیام رو بین Tab های مختلف مخابره میکنه و میگه که کاربر در حال Login کردن و یا Logout شدنه .حالا داستان اصلی اونجاست که ما تابع syncAllTabs رو نوشتیم که این تابع درواقع یک eventListener هستش که ما میتونیم روی هر Component که خواستیم ازش استفاده کنیم . مثلا موقعی که پیام LOGIN بین همه Tab ها مخابره بشه این event LOGIN انگار فعال شده و ما میگیم که همه Tab ها سریع Login کنید و برای حالت LOGOUT هم به همین شکله .و در انتها باید ازین syncAllTabs توی تابع useEffect کامپوننت اصلی ما اجرا بشه : شکل - 5و حالا کافیه که ما توی یکی از Tab های وب اپلیکیشنمون عملیات Login یا Logout رو انجام بدیم و بعدش متوجه بشیم که توی همه Tab های وب اپلیکیشنمون این اتفاق میوفته ( واااای ?)جمع بندی ?.در انتها باید بگم اگر خیلی ریز به ریز و به جزییات براتون نزاشتم چون میخواستم هم زود تر بخونیش که حوصلت سر نره و هم اینکه صرفا بهت یک دید داده باشم تا بتونی مسئله رو خودت حل کنی و اعتماد به نفس بیشتری بدست بیاری و هم چنین از یادگیری لذت ببری .و البته این مقاله بنظرم با یک ویدعو میتونه خیلی قشنگ تر باشه و درک بالاتری بهت بده ، خیلیم دوست دارم هرچه سریع تر یه ویدعو درباره این مقاله بزارم که مطمئن باش آخر همین پست اضافش میکنم.فقط گفته باشم صرفا خوندن این مقاله کاری نمیتونه برات بکنه یادت نره که حتما دست به کد باشی ?.اگر از خوندن این مقاله لذت بردی خیلی خوشحال میشم هم نظرتو بنویسی ( که با کدوم بخش یا چه ویژگی ازین مقاله حال کردی ) و هم اینکه به اشتراکش بزاری ممنون .

نحوه ساخت Route های محافظت شده در ReactJS ?

علیرضا شهابی — Fri, 07 Feb 2020 22:16:18 +0330

با سلام به همه دوستان من علیرضا شهابی هستم چند سالیه که برنامه نویسی رو به صورت حرفه ای دنبال میکنم و خودم رو یک Full Stack Javascript developer میدونم و این اولین پست من در زمینه توسعه سمت کاربر ( Front - end ) با چارچوب React ؛ پس اگه کمی و کاستی میبنید حتما حتما کامنت کنید تا منم بتونم پیشرفت بیشتری کنم و محتوای با کیفیت تری تولید کنم ?.خوب بخش اول صرفا یه معرفی ساده از خودم بود ، حالا بریم که یک وب اپلیکیشن توی React ایجاد کنیم که البته من از typescript به عنوان زبان استفاده میکنم ( اگه با این زبان آشنایی ندارین و بخوام یه تعریف ساده بکنم Javascript + Typescript ) - قبل ازینکه بریم سراغ کد نویسی ممکنه برای شما سوال بشه که اصن Route محافظت شده یعنی چی ؟+ یعنی درنظر بگیرید که شما میخواین از ورود کاربر به Route های مختلف جلوگیری کنید و یا به طور کلی میخواین دسترسی کاربر رو تو بخش های مختلف مدیریت کنید.حالا نیاز مندی های پروژمون پکیج react-router-dom و یه دانش کلی از Typescript و آشنایی با چند تا keyword همین و بس ! نصب نیازمندی ها ?.برای شروع ابتدا از دستور خط npx استفاده میکنم .npx create-react-app "YOUR_APP_NAME" --typescriptخوب با این شیوه اپلیکیشن شما ایجاد شده ( و اینکه این اپ هم از Js و Typescript پشتیبانی میکنه ). خوب حالا میایم با دستور خط زیر React - Router را نصب میکنیم .yarn add react-router-dom @types/react-router-domعلتی که از types@ استفاده میکنیم اینه که میخوایم تحت Typescript کد بزنیم.کد بزنیم ?. خب شروع میکنیم اولین چیزی که قراره درباره این اپ بدونید اینه که کلا دو تا Route داره یکی Public با مسیر "/" و اون یکی Private || Protected با مسیر "admin/" .در ابتدا صفحه App.tsx رو به صورت زیر ایجاد میکنیم . یک Functional Component که داره Route های اصلی برنامه مارو بهمون بر میگردونه .شکل - 1که حالا من اومدم ProtectedRoute رو نوشتم و ازش استفاده کردم.- خوب بریم سراغ این سوال که اصن این ProtectedRoute که من ساختم اصن چی هست ؟+ طبق قیافه ای که داره شبیه یک Component که prop های path و component رو میگیره و تحت یک شرایط خاصی که ما خودمون تعیین میکنیم اون رو render میکنه !فک کنم تا اینجا نصف بیشتر مسئله رو باهم حل کردیم تنها کاری که باید بکنیم یک Component ایجاد کنیم که prop های path و component رو بگیره ؛ پس هرچه زود تر بریم تو کار کد نویسی این قسمت ?.شکل - 2خب طبق عکس ما اومدیم و یک Functional Component ایجاد کردیم به نام ProtectedRoute و دو تا prop هایی که میخواستیم رو ازش میکشیم بیرون. - خوب این سوال پیش میاد که این rest چی هست ؟ + جواب اینکه این rest صرفا یک سری پارامتر هستن که برای ما path بود ولی شامل exact و ... هرچیز دیگه ای عشقت بکشه هم میشه و این یعنی هرچیزی که عشقت بکشه رو میتونی به Route به عنوان rest بفرستی !و خب ما با استفاده از Route میایم و در بخش render یک تابع مینویسیم که به ما یک Component دیگه رو برمیگردونه.حالا میگیم که اگر کاربر ما وارد شده بود ( میتونید از هرشیوه ای که دوست دارید این بخش رو پیاده سازی کنید ) میتونه به صفحه ادمین که در شکل - 1 روی مسیر "admin/" دسترسی داشته باشه به همین راحتی ?!جمع بندی ?. در انتها باید بگم اگر خیلی ریز به ریز و به جزییات براتون نزاشتم چون میخواستم هم زود تر بخونیش که حوصلت سر نره و هم اینکه صرفا بهت یک دید داده باشم تا بتونی مسئله رو خودت حل کنی و اعتماد به نفس بیشتری بدست بیاری و هم چنین از یادگیری لذت ببری .فقط گفته باشم صرفا خوندن این مقاله کاری نمیتونه برات بکنه یادت نره که حتما دست به کد باشی ?.اگر از خوندن این مقاله لذت بردی خیلی خوشحال میشم هم نظرتو بنویسی ( که با کدوم بخش یا چه ویژگی ازین مقاله حال کردی ) و هم اینکه به اشتراکش بزاری ممنون .

نظریه انتخاب طبیعی داروین در قرن 21

علیرضا شهابی — Wed, 20 Jun 2018 18:36:26 +0430

نظریه انتخاب طبیعی داروین (‌ ضعیف در طبیعت از بین میرود و قوی در طبیعت باقی می ماند)با سلام امروز میخوام باهم یکم نظریه انتخاب طبیعی داروین رو در قرن 21 مورد بررسی قرار بدیم و بدونیم در این قرن چه چیز هایی باعث میشه که ما موجود ( انسان ) قوی یا ضیعفی باشیم یا از چرخه طبیعی بازار کار و موفقیت حذف بشیم یا همیشه در قدرت باقی بمونیم. خوب بزارید توضیحی بدم که چرا اصن ایده نوشتن این بلاگ به سرم خورد !!الان 4 سال که دانشجوی رشته مهندسی نرم افزارم و جالب تر از همه این بود که نه تنها در رشته کامپیوتر خیلی از افراد از رشته های دیگه هم حتی یه نوشتن ایمیل رو هم بلد نبودن و جوری جلوه میکردن که اصن انگار این قضیه خیلی ساده ای و همه نباید اصن بلد باشند !!! شاید حرفشون درست باشه ... البته که درسته هیچ کس از یه آدم 70 ساله انتظار ایمیل نوشتن نداره یا اینکه بتونه با نرم افزار های office کار کنه ولی برای آدم هایی سر تا پا ادعای مهندسی رو دارن و مدعی اینن که ما داریم علم رو در کشور رو به جلو میبیریم و اینکه میخوایم در آینده کاره ای برای خودمون باشیم اصلا توجیه نداره !!! خوب اول شرو میکنیم به اینکه چه چیزایی باعث میشه که در این دنیای سرمایه داری از بین بریم ؟؟؟اولین و کامل ترین جوابی که هر کدوم از ما به ذهنمون میاد پوله ! ... دقیقا همینه پول تعیین کننده اینه که ما آیا در صدر جدول موفقیت هستیم یا اینکه ازین چرخه زندگی حذف میشیم خوب سوال بعدی اینکه که چی میشه حذف میشیم آیا میمیریم ؟ برای جواب این سوال اول بگم که ما داریم درمورد چرخه کاری زندگیمون حرف میزنیم و تو این چرخه اگه بخوایم زنده بمونیم نیاز به پول داریم و خوب موقعی تو این چرخه میمیریم که پول نداشته باشیم و زمانی این اتفاق میوفته که نادیده گرفته میشیم ( به طور کلی رقیبای خفن تری داریم که کار رو به اونا میدن ) خوب چیکار کنیم که ازین اتفاقا سرمون نیاد و به قولی همیشه در صدر جدول باشیم ؟!!خوب به طور کلی نه تنها در رشته یا کاری که میکنید تخصص داشته باشید بلکه باید مهارت های عمومی کاری رو به درستی بلد باشین !!!اولین مهارت و مهم ترین مهارتی که باید یاد بگیرید اینه که اینگلیسی بلد باشیم !!!یادمون نره که ما بدون توانایی تکلم فقط یک موجود زنده ای هستیم که قراره در چرخه زندگی در قرن 21 دست و پا بزنیم .. همین !!!که خوب راه های متفاوتی برای یاد گیری این زبان هست ( مثل :‌کلاس زبان , تمرین کردن با انگلیسی زبان ها و ازین قبیل حرکات )خب من گفتم که بد نیست یه چند تا سایت باحال رو هم برای تمرین زبان اینگلیسی با انگلیسی زبان ها به شما معرفی کنم !!! تمرین برای مکالمه زبان اینگلیسی :‌ www.speaking247.com یادگیری زبان اینگلیسی با استفاده از یک زبان دیگه www.duolingo.comدومین مهارتی که شما باید حتما بلد باشین نوشتن یک ایمیل هست که میتونید با جست و جو در اینترنت هم یادبگیرین که چطوری نوشته میشه و هم اینکه نکاتی درباره نوشتن صحیح اون میتونین پیدا کنید !!!سومین مهارت مهم کار با نرم افزار هایی مثل word , excel , powerpoint که خیلی مهمه که انسان هایی که ادعای مهندسی دارند این هارو به شدت خوب بلد باشند چون خیلی از جاهای مهم حتی اگه شما بلد باشین که یک گزارش درست بنویسین شانس شما رو برای گرفتن کار به شدت بالا میبره چهارمین مهارت مهم یادگیری یک زبان برنامه نویسی ... میگن تو سال 2020 هر کسی که برنامه نویسی بلد نباشه بی سواد حساب میشه که البته به دور از منطق هم نیست !!! اینم از من میشنوین یکی از بهترین کارهای توی این دنیاست و همچینن یکی از بهترین مهارت هاخب زبون هایی که میتونین یاد بگیرین خیلی زیاده اما میتونم یه راه نمایی در رشته های مهندسی بهتون بکنم !!!‌برای زیر شاخه های علوم کامپیوتر میتونم به c++ , javascript , java , python , php , .... اشاره کنم که حتی یکی ازین هارو هم خوب بلد باشین کافیه !! ولی برای سایر رشته های مهندسی من بنظرم بهترین ابزاری که میتونین یادبگیرین و شروعی باشه برای به اوج رسیدنتون میتونه Matlab باشه که هم دوره های فراوانی توی نت داره و هم کتاب های زیادی براش نوشته شده !!!جمع بندی !!!خب کلی حرف زدیم و صحبت کردیم اما نتیجش چیه ... نتیجش اینه که به شخصه از دیدن آدم هایی که حتی چنین مهارت هایی رو بلد نیستن و ادعا های بزرگی دارن خسته شدم و بنظرم بد نیست که این دوستان ازین مهارت ها در کنار مهارت های تکلّمیشون استفاده کنن این ها مهارت های اولیه قرن حاظر ما هستن پس لطفا در یادگیری این مهارت ها حتی یک لحظه درنگ نکنید!!!

نوشتن تست برای توابع javascript با استفاده از mocha.js و node.js

علیرضا شهابی — Thu, 17 May 2018 02:35:59 +0430

من علیرضا شهابی هستم و در این نوشته سعی دارم با استفاده از `node.js` و پکیج `mocha.js` بیام و توابعی که به زبان `javascript` نوشته میشه رو تست کنم!!! خوب سوال اول اینه که باید از کجا شرو کنیم ؟؟؟ ( جواب خوبی هم براش دارم! ) چند سری مراحل داره که باید باهم انجام بدیم بعدش میزینم تو کٌد ! ( فقط قبلش من یه سر فصل براش بنویسم یکم مرتب باشه)اول باید اگر `node.js` رو روی سیستم خودتون نصب ندارید از اینجا دانلودش کنید و خوب بعدش با استفاده از `npm` مراحل زیر رو دنبال کنیم !!!دوم میریم برای نصب خود پکیج که با یه دستور خیلی ساده روی کل سیستمتون (‌ چقد ت داره )‌ نصب میکنید !سومیادمون نره که ساختار پروژه دقیقا به این شکله !!!چهارممیریم و شرو میکنم به نوشتن چند تا تابع javascript که بتونیم براشون تست بنویسیم !و بعد ازین ها میایم و شرو میکنیم به نوشتن فایل `index.js` به این شکل خوب برای `run` کردن تستمون کافیه فقط دستور ‍‍`mocha` رو توی terminal یا command prompt اجرا کنید همین ! و نتیجه ای هم که میگیرین به این شکل خواهد بود !خوب به همین راحتی یاد گرفتیم چطوری یه تست باحال بنویسیم ! خوب ممکنه یه سری از دوستان بگن که اینطوری که ما هیچی یاد نگرفتیم !‌ خوب این نوشته برای اینکه مسیر راهتون یکم روشن تر باشه اما خوب مطمعنا فیلم آموزشی هم در این زمینه ضبط میکنم !