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

امروز میخوام با یه مثال ساده کتابخونه محبوب ریداکس رو آموزش بدم. ریداکس خیلی ساده است اما خیلی ها ازش وحشت دارن. درصورتی که اگه خوب یادش بگیرید واقعا ساده است. شما هم با آموزش ریداکس به زبان ساده من همراه باشید تا بتونید تو پروژه هاتون ازش استفاده کنید.

تو این مقاله قرار نیست در مورد مزیت های ریداکس و ساختار داخلیش و مقایسه اش با سایر state manager ها و ... صحبت کنم. تو مقاله های بعدیم در مورد خود ریداکس و ساختارش و مزایاش بیشتر مینویسم ولی تو این مقاله اول میخوام یه پروژه ساده بسازم و بعد با ریداکس بازنویسیش کنم.

در صورتی که به سیستم های ورژن کنترل علاقه دارید ، این مقاله رو از دست ندید:

خوب شروع کنیم !

اول از همه یه پروژه ساده شمارنده (counter) با استفاده از state داخلی و بدون ریداکس میسازم .

تو این مثال دوتا دکمه لازم دارم ، یکی برای اضافه کردن شمارنده و یکی هم برای کاهش شمارنده. اول از همه یه کامپوننت به اسم App که کارش فقط رندر کردن کامپوننت CounterApp هستش میسازم. ( البته میشه این کامپوننت رو به صورت فانکشنال هم نوشت)

حالا نوبت کامپوننت CounterApp هست:

تو State این کامپوننت یک مقدار counter وجود داره که وضعیت شمارنده مارو در هر لحظه نگه میداره. دوتا فانکشن داریم که وظیفه اضافه و کاهش مقدار counter رو دارند. تو قسمت رندر یک div شامل ۲ تا button و یک المان p برای نمایش مقدار counter وجود داره.

خوب برنامه ساده ما تموم شد!‌ بریم سراغ اضافه کردن ریداکس !

همچنین میتونید مقاله معرفی ریداکس ساگا رو مطالعه کنید:

به شکل زیر دقت کنید

ساختار ریداکس رو میتونید اینجا ببینید.

اضافه کردن ریداکس

نوبت اضافه کردن ریداکس هست. قبل از هر چیزی نصبش کنیم:

با استفاده از npm

npm 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 برنامه تغییر کرده.

دلیل اینکه دوتا ثابت به اسم اکشن‌هامون تعریف کردیم اینکه کدمون تمیز تر باشه و بتونیم از همین ثابت‌ها تو کدمون استفاده کنیم. کار تابع اکشن خیلی ساده است و صرفا داره خبر میده نوع اکشنش چی هست ( تو این مثال: افزایش و کاهش مقدار counter) از این type ها توی reducer استفاده میکنیم.

فایل reducer.js

اصل کار اینجاست، همه تغییرات اینجا اتفاق میوفته و مقدار state کلی برنامه تغییر میکنه.

نوع اکشن هامون رو به این فایل وارد میکنیم و یک state اولیه می سازیم (که قبلا هم داشتیم و فقط اینجا اسمش از state به initialState تغییر کرده). تابع reducer ما در واقع مقدار state رو برمیگردونه. تو تابع reducer از switch استفاده میکنیم و برای هر تعداد اکشنی که داریم یک وضعیت در نظر میگیریم.

باید با توجه به اصل immutability مقدار state ، تغییرات رو انجام بدیم . درسته که اینجا state اولیه ما یک مقدار به اسم counter داره اما برای اینکه تمرین خوبی باشه که تو پروژه های بعدی هم بتونید ازش استفاده کنید من عمدا از ...state استفاده کردم .
فرض کنید تو یه پروژه ای که state شامل ۲۰۰ تا مقدار هستش میخواهید این کارو انجام بدید پس نباید سایر مقادیر state همراه با تغییر counter تغییر کنه.

مقدار default در انتهای تابع به این معنی است که اگر اکشن صدا زده شده چیز دیگه ای بود و یا اینکه تعریف نشده بود ، برنامه با خطا مواجه نشه و تحت هر شرایطی مقدار state رو داشته باشیم.

فایل store.js

تابع reducer که در قسمت قبلی ساختیم رو اینجا استفاده میکنیم و مقدار store رو میسازیم.

فایل App.js

حالا بعد از اینکه این ۳ تا فایل رو ساختیم به سراغ برنامه ای که نوشته بودیم میریم و شروع میکنیم به ایجاد تغییرات. اول از همه نوبت تغییر فایل App.js هست که میخواهیم بهش مقدار store رو بدیم . این store در واقع همون state ماست که از طریق Provider به کل برنامه ما داده میشه:

با اینکار همه کامپوننت هایی که توی CounterApp قرار گرفتند هم به مقدار state دسترسی دارند ( که البته تو مثال ما فقط همین یک عدد کامپوننت هست)

فایل CounterApp.js

این تغییرات در نهایت به آخرین کامپوننت ما میرسند:

خوب از بالا شروع کنیم به بررسی این کد. توابع اکشنی که لازم داریم رو به برنامه وارد کردیم.

به جای اینکه با توابع افزایش و کاهش مقدار state رو تغییر بدیم لازمه که تغییرات رو به ریداکس dispatch کنیم ( مخابره کنیم - خبر بدیم).

توی المان P هم به جای اینکه بیایم مستقیم مقدار counter رو از state صدا بزنیم ( چون مقدار state داخلی رو نداریم) باید از یک تابع جدید به اسم mapStateToProps استفاده کنیم که کارش فراخونی state به برنامه و متصل کردنش به props هست. و در انتها با استفاده از connect این تابع رو به کامپوننتمون متصل کنیم.

به جای استفاده از this.state.counter باید از this.props.counter استفاده کنیم.

خوب، خسته نباشید. این آموزش هم تموم شد!

ریداکس رو به چندین شکل میشه پیاده سازی کرد و من سعی کردم ساده ترین شکلش رو براتون بیان کنم و از بعضی قسمت ها مثل mapDispatchToProps صرفنظر کردم.

در آینده مقاله های بیشتری در مورد ریداکس و نحوه استفاده اش در پروژه های بزرگ و پیچیده بیشتر مینویسم.

سایر نوشته های من در ویرگول:

Contact With me:
https://t.me/nimamohamadian
https://www.facebook.com/nimamohamadian89
https://twitter.com/Nima_Mohamadian
https://www.linkedin.com/in/nima-mohamadian-57ba63123