ریداکس به زبان ساده

امروز میخوام با یه مثال ساده کتابخونه محبوب ریداکس رو آموزش بدم. ریداکس خیلی ساده است اما خیلی ها ازش وحشت دارن. درصورتی که اگه خوب یادش بگیرید واقعا ساده است. شما هم با آموزش ریداکس به زبان ساده من همراه باشید تا بتونید تو پروژه هاتون ازش استفاده کنید.تو این مقاله قرار نیست در مورد مزیت های ریداکس و ساختار داخلیش و مقایسه اش با سایر state manager ها و ... صحبت کنم. تو مقاله های بعدیم در مورد خود ریداکس و ساختارش و مزایاش بیشتر مینویسم ولی تو این مقاله اول میخوام یه پروژه ساده بسازم و بعد با ریداکس بازنویسیش کنم.ریداکس به زبان ساده در صورتی که به سیستم های ورژن کنترل علاقه دارید ، این مقاله رو از دست ندید: https://virgool.io/@novonimo/گیت-گیتهاب-و-گیت-لب-umq6qkstrfwi خوب شروع کنیم !اول از همه یه پروژه ساده شمارنده (counter) با استفاده از state داخلی و بدون ریداکس میسازم .تو این مثال دوتا دکمه لازم دارم ، یکی برای اضافه کردن شمارنده و یکی هم برای کاهش شمارنده. اول از همه یه کامپوننت به اسم App که کارش فقط رندر کردن کامپوننت CounterApp هستش میسازم. ( البته میشه این کامپوننت رو به صورت فانکشنال هم نوشت)App.jsحالا نوبت کامپوننت CounterApp هست:CounterApp.jsتو State این کامپوننت یک مقدار counter وجود داره که وضعیت شمارنده مارو در هر لحظه نگه میداره. دوتا فانکشن داریم که وظیفه اضافه و کاهش مقدار counter رو دارند. تو قسمت رندر یک div شامل ۲ تا button و یک المان p برای نمایش مقدار counter وجود داره.خوب برنامه ساده ما تموم شد!‌ بریم سراغ اضافه کردن ریداکس !همچنین میتونید مقاله معرفی ریداکس ساگا رو مطالعه کنید: https://virgool.io/@novonimo/ریداکس-ساگا-xyhromdbwxzm به شکل زیر دقت کنیدساختار ریداکس رو میتونید اینجا ببینید.ریداکساضافه کردن ریداکسنوبت اضافه کردن ریداکس هست. قبل از هر چیزی نصبش کنیم:با استفاده از npmnpm install redux react-redux --saveیا اگر با yarn میخواهید نصبش کنیدyarn add redux react-reduxاگه دقت کنید ما دوتا پکیج نصب کردیم، یکی redux و یکی هم react-redux حالا ۳ تا فایل به اسم های action.js store.js reducer.js تو پروژه میسازیم. (‌جایی که دوتا فایل App.js و CounterApp.js هستند)فایل action.js تو این پروژه به نظرتون چه اکشن هایی لازم هست ؟‌ یکی برای افزایش مقدار counter و یکی هم برای کاهش مقدار counter پس در مجموع ۲ تا اکشن لازم داریم. اکشن ها توسط dispatch شدن، به ریداکس خبر میدن که یه مقداری تو state برنامه تغییر کرده.action.jsدلیل اینکه دوتا ثابت به اسم اکشن‌هامون تعریف کردیم اینکه کدمون تمیز تر باشه و بتونیم از همین ثابت‌ها تو کدمون استفاده کنیم. کار تابع اکشن خیلی ساده است و صرفا داره خبر میده نوع اکشنش چی هست ( تو این مثال: افزایش و کاهش مقدار counter) از این type ها توی reducer استفاده میکنیم.فایل reducer.jsاصل کار اینجاست، همه تغییرات اینجا اتفاق میوفته و مقدار state کلی برنامه تغییر میکنه.نوع اکشن هامون رو به این فایل وارد میکنیم و یک state اولیه می سازیم (که قبلا هم داشتیم و فقط اینجا اسمش از state به initialState تغییر کرده). تابع reducer ما در واقع مقدار state رو برمیگردونه. تو تابع reducer از switch استفاده میکنیم و برای هر تعداد اکشنی که داریم یک وضعیت در نظر میگیریم.reducer.jsباید با توجه به اصل immutability مقدار state ، تغییرات رو انجام بدیم . درسته که اینجا state اولیه ما یک مقدار به اسم counter داره اما برای اینکه تمرین خوبی باشه که تو پروژه های بعدی هم بتونید ازش استفاده کنید من عمدا از ...state استفاده کردم .فرض کنید تو یه پروژه ای که state شامل ۲۰۰ تا مقدار هستش میخواهید این کارو انجام بدید پس نباید سایر مقادیر state همراه با تغییر counter تغییر کنه.مقدار default در انتهای تابع به این معنی است که اگر اکشن صدا زده شده چیز دیگه ای بود و یا اینکه تعریف نشده بود ، برنامه با خطا مواجه نشه و تحت هر شرایطی مقدار state رو داشته باشیم.فایل store.jsstore.jsتابع reducer که در قسمت قبلی ساختیم رو اینجا استفاده میکنیم و مقدار store رو میسازیم.فایل App.jsحالا بعد از اینکه این ۳ تا فایل رو ساختیم به سراغ برنامه ای که نوشته بودیم میریم و شروع میکنیم به ایجاد تغییرات. اول از همه نوبت تغییر فایل App.js هست که میخواهیم بهش مقدار store رو بدیم . این store در واقع همون state ماست که از طریق Provider به کل برنامه ما داده میشه:با اینکار همه کامپوننت هایی که توی CounterApp قرار گرفتند هم به مقدار state دسترسی دارند ( که البته تو مثال ما فقط همین یک عدد کامپوننت هست)فایل CounterApp.jsاین تغییرات در نهایت به آخرین کامپوننت ما میرسند:CounterApp.jsخوب از بالا شروع کنیم به بررسی این کد. توابع اکشنی که لازم داریم رو به برنامه وارد کردیم.به جای اینکه با توابع افزایش و کاهش مقدار state رو تغییر بدیم لازمه که تغییرات رو به ریداکس dispatch کنیم ( مخابره کنیم - خبر بدیم).توی المان P هم به جای اینکه بیایم مستقیم مقدار counter رو از state صدا بزنیم ( چون مقدار state داخلی رو نداریم) باید از یک تابع جدید به اسم mapStateToProps استفاده کنیم که کارش فراخونی state به برنامه و متصل کردنش به props هست. و در انتها با استفاده از connect این تابع رو به کامپوننتمون متصل کنیم. به جای استفاده از this.state.counter باید از this.props.counter استفاده کنیم.خوب، خسته نباشید. این آموزش هم تموم شد!ریداکس رو به چندین شکل میشه پیاده سازی کرد و من سعی کردم ساده ترین شکلش رو براتون بیان کنم و از بعضی قسمت ها مثل mapDispatchToProps صرفنظر کردم.در آینده مقاله های بیشتری در مورد ریداکس و نحوه استفاده اش در پروژه های بزرگ و پیچیده بیشتر مینویسم.سایر نوشته های من در ویرگول: https://virgool.io/@novonimo/معرفی-storybookjs-ub1k1h88bda6 https://virgool.io/JavaScript8/معرفی-flow-برای-جاواسکرپیت-ogssae9iaif4 https://virgool.io/iran-react-community/آموزش-مبتدی-react-native-همراه-با-مثال-از-صفر-تا-۱%DB%B0%DB%B0-قسمت-اول-cyqz5skqhuxv Contact With me:https://t.me/nimamohamadianhttps://www.facebook.com/nimamohamadian89https://twitter.com/Nima_Mohamadianhttps://www.linkedin.com/in/nima-mohamadian-57ba63123