برنامه نویسی 274 بازدید

اصطلاح‌های تخصصی زیادی در دنیای ریداکس وجود دارند. اکشن، اکشن‌ساز، انواع اکشن، کاهنده، کاهنده‌های ریشه و مواردی از این دست. در پس همه این مجموعه واژگان پیچیده، کدهای ساده‌ای وجود دارند که موجب بهبود زیادی در روش سازماندهی و نوشتن اپلیکیشن‌های ری‌اکت شده‌اند. در این مطلب تلاش خواهیم کرد برخی از این مفاهیم مقدماتی و مبانی ریداکس را توضیح دهیم. همچنین قصد داریم نگاهی به پکیج‌های پراستفاده npm داشته باشیم که به همراه ری‌اکت و ریداکس استفاده می‌شوند.

مبانی ریداکس

ما در این نوشته با یک اپلیکیشن کاملاً ساده ری‌اکت کار می‌کنیم تا بتوانیم مبانی ریداکس را نشان داده و توضیح دهیم. ما قصد داریم یک کامپوننت بسازیم که یک عنصر دکمه بازگشت می‌دهد و کاربر می‌تواند روی آن کلیک کند تا مقداری از متن مشخص شود. فهرست فایل‌هایی که می‌خواهیم نگاه دقیقی به آن‌ها داشته باشیم، شامل همه فایل‌هایی می‌شود که زیر پوشه src قرار دارند. همچنین به بررسی فایل‌های rootReducer.js و App.js می‌پردازیم.

کار خود را با تجزیه کردن اکشن‌ها آغاز می‌کنیم.

ریداکس

اکشن‌ها

مستندات ریداکس (+) اکشن‌ها را به عنوان «ظرفیت ترابری اطلاعات که داده‌ها را از اپلیکیشن به store ارسال می‌کند» تعریف کرده است. فعلاً لازم نیست در مورد واژه store نگران باشید، چون در ادامه همه چیز را توضیح خواهیم داد. مستندات ریداکس اکشن‌ها را به خوبی تعریف کرده‌اند. اکشن‌ها پیچیده نیستند؛ در واقع اکشن صرفاً یک شیء جاوا اسکریپت ساده است. به مثال زیر توجه کنید:

خط 4 کد فوق یک اکشن معتبر ریداکس است. چنان که می‌بینید این صرفاً یک شیء جاوا اسکریپت است. اکشن‌ها در ریداکس باید یک مشخصه type داشته باشند که نشان‌دهنده نوع اکشنی است که قرار است اجرا شود. می‌توان از اکشن‌ها هر چیزی خواست؛ اما باید کاری که خواسته می‌شود توضیح داده شود. به جز این می‌توان هر مشخصه‌ای که برای یک اپلیکیشن معنی‌دار است به اکشن‌ها اضافه کرد. در اغلب موارد می‌بینید که الگوی مهم معرفی شده در خط 1 یعنی گزاره ایمپورت به وفور در کدهای مختلف وجود دارد. توجه داشته باشید که در دایرکتوری اکشن‌ها در پروژه، فایلی به نام type.js داریم که مانند زیر است:

ثابت‌های نوع اکشن

فایل‌هایی که در بخش فوق معرفی کردیم، ثابت‌های نوع اکشن هستند و دلیل این که برنامه‌نویسان دوست دارند از آن‌ها استفاده کنند، این است که به سازماندهی کد کمک می‌کنند. بدین ترتیب همه انواع اکشن در یک فایل نگهداری می‌شوند و برنامه‌نویسان می‌توانند آن‌ها را در فایل‌های دیگر ایمپورت کرده و یا به صورت موردی استفاده کنند. این وضعیت به جلوگیری از بروز باگ در زمان فراخوانی اکشن‌ها از سوی «کاهنده» (Reducer)-ها کمک می‌کند. این نکته را در بخشی از ذهن خود داشته باشید تا در موقع خود توضیح دهیم که چرا این وضعیت به جلوگیری از بروز باگ در کاهنده‌ها کمک می‌کند.

بنابراین اکشن‌هایی داریم که صرفاً اشیای ساده جاوا اسکریپت هستند. اکنون از اکشن‌ها برای ساختن «اکشن‌ساز» (Action Creator) استفاده می‌کنیم. لطفاً از این که با یک اصطلاح جدید ریداکس مواجه شده‌اید، آشفته نشوید. اکشن‌ساز نیز بسیار ساده است. در ادامه نگاهی به یک اکشن‌ساز خواهیم داشت که مربوط به اکشن کدنویسی شده در بخش قبلی است:

همان طور که در کد فوق می‌بینید، یک اکشن‌ساز صرفاً تابع ساده جاوا اسکریپت است که شیء را بازگشت می‌دهد. این اکشن‌سازها توابعی هستند که اکشن‌ها را ایجاد می‌کنند (بازگشت می‌دهند). ما باید اکشن‌ساز خود را اکسپورت کنیم، زیرا در نهایت می‌خواهیم آن را در فایل کامپوننت Toggle.js ایمپورت کنیم تا از آن برای dispatch کردن اکشن TOGGLE_MESSAGE_VISIBILITY استفاده کنیم. اما شاید کمی تند رفتیم، ابتدا باید کاهنده‌ها را بررسی کنیم.

کاهنده‌ها

در اپلیکیشن‌های ریداکس، «حالت» (State) اپلیکیشن به صورت یک شیء منفرد ذخیره می‌شود. هنگامی که یک اکشن به store (این را نیز به زودی تعریف خواهیم کرد) ارسال می‌شود، کاهنده‌ها به مدیریت شیوه تغییر یافتن حالت در پاسخ به آن اکشن می‌پردازند. ما تنها رد 1 چیز را در حالت اپلیکیشن خود نگه می‌داریم و آن این است که آیا پیام ما قابل مشاهده است یا نه. در ادامه نگاهی به فایل toggle.js خواهیم داشت که در دایرکتوری کاهنده‌ها به صورت تو در تو قرار دارد:

تنظیمات پایه

توضیح کد فوق را از خط 1 آغاز می‌کنیم. به خاطر داشته باشید که گفتیم استفاده از ثابت‌های نوع اکشن به جلوگیری از باگ کمک می‌کنند؟ برای توضیح دلیل این مسئله کد زیر را بدون استفاده از ثابت‌های نوع اکشن نوشته‌ایم. به جای استفاده از ثابت‌های نوع اکشن، که به اکشن‌سازها و کاهنده‌ها ارسال می‌شوند، از تنظیمات پایه استفاده می‌کنیم:

در مثال فوق، از ثابت‌های نوع اکشن برای ساخت اکشن‌ساز بهره نمی‌گیریم و به جای آن از تنظیمات پایه استفاده کرده‌ایم. سپس در کاهنده اکشنی را که می‌خواهیم در ثابت سوئیچ تحریک شود به صورت اشتباه نوشته‌ایم (ساختار کاهنده‌ها را نیز در ادامه توضیح خواهیم داد). مشکل کد فوق این است که کاری که ما از آن می‌خواهیم را انجام نمی‌دهد؛ اما خطایی را نیز تولید نمی‌کند. کد همچنان اجرا می‌شود، زیرا این یک رشته معتبر است. با این وجود اگر آن را با استفاده از یک ثابت نوع اکشن بارگذاری می‌کردیم و سپس آن ثابت را اشتباه می‌نوشتیم، کامپایلر خطایی صادر می‌کرد که به ما نشان می‌داد کجا اشتباه کرده‌ایم.

اینک متوجه شدیم که چرا باید از ثابت‌های نوع اکشن استفاده کنیم؛ اما در مورد باقی فایل چه می‌توان گفت؟ کار خود را با توصیف آن چه که در مورد حالت ابتدایی می‌خواهیم، آغاز می‌کنیم. ما می‌خواهیم که پیاممان در ابتدا پنهان باشد:

این مورد نیز یک مثال کاملاً ساده محسوب می‌شود. شما احتمالاً در اپلیکیشن‌های بزرگ‌تر خود در حالت آغازین، مشخصه‌های بیشتری خواهید داشت. در نهایت کاهنده واقعی را مورد بررسی قرار می‌دهیم:

تابع کاهنده

توضیح خود را با اکسپورت کردن تابع کاهنده آغاز می‌کنیم، زیرا در ادامه قصد داریم همه کاهنده‌ها را در فایل rootReducer.js بارگذاری کنیم. سپس پارامتر حالت را به صورت شیء حالت آغازین که در بخش قبلی کدنویسی کردیم تنظیم و سپس به اکشن خود ارسال می‌کنیم. در خط 2، action.type را استخراج کرده و آن را در ثابت type با استفاده از روش تجزیه ساختار ES6 ذخیره می‌کنیم.

سپس به بدنه اصلی کاهنده می‌رسیم که گزاره سوئیچ است. گزاره سوئیچ ما به نوع اکشن نگاه می‌کند و حالت را بر اساس روشی که می‌خواهیم اکشن، آن را تغییر دهد تنظیم می‌کند. در این مثال ساده می‌خواهیم messageVisibility را از false به true یا برعکس تغییر دهیم و پیام خود را پنهان کنیم. در ادامه نگاهی دقیق‌تر به کاهنده خودمان خواهیم داشت:

state… برای چیست؟

به خاطر داشته باشید که ما هرگز نباید در اپلیکیشن‌های ری‌اکت، state را به صورت مستقیم دستکاری کنیم. ساختار فوق در جاوا اسکریپت ES6 ارائه شده است و دقیقاً همان کار کد زیر را انجام می‌دهد:

بدین ترتیب یک کپی از حالت ایجاد می‌شود و مشخصه‌ای که می‌خواهیم تغییر داده می‌شود. در ریداکس نمی‌توان حالت را تغییر داد؛ بلکه به جای آن باید یک کپی از آن را بازگشت داد.

اکنون که کاهنده تنظیم شده است باید نگاهی به فایل rootReducer.js و فایل App.js داشته باشیم تا همه این موارد را جمع‌بندی کنیم. به فایل rootReducer.js توجه کنید:

توضیح خود را از ایمپورت کردن متد combineReducers از ریداکس آغاز می‌کنیم. البته این مثال تا حدودی ساختگی است، زیرا برای متد combineReducers خود، کاهنده‌های چندگانه نداریم؛ اما فعلاً این موضوع برایمان اهمیتی دارد. سپس کاهنده toggle را ارسال کرده و نتیجه را در یک const به نام rootReducer ذخیره می‌کنیم که در خط آخر اکسپورت شده است.

اکنون ما همه کاهنده‌های خود را به صورت ترکیبی در یک const منفرد به نام rootReducer داریم که در اختیار بخش‌های دیگر اپلیکیشن قرار دارد. این امر مهمی است، زیرا از این rootReducer برای ایجاد store استفاده خواهیم کرد.

Store ریداکس

هنگامی که از ریداکس استفاده می‌کنیم، store به نگه‌داری از حالت اپلیکیشن می‌پردازد. هر اپلیکیشن ریداکس تنها 1 store منفرد دارد. store در ریداکس موضوع عجیبی است، زیرا امکان دسترسی به حالت اپلیکیشن را از هر کامپوننتی درون اپلیکیشن می‌دهد. اتصال به store ریداکس کار بسیار آسانی است. به فایل App.js زیر نگاه کنید:

ما کار خود را با ایمپورت کردن ری‌اکت و کامپوننت از ری‌اکت آغاز می‌کنیم که خب چیزی جدیدی در این جا وجود ندارد. سپس Provider را از react-redux ایمپورت می‌کنیم. ماژول npm به نام react-redux به ما کمک می‌کند که ریداکس را به آسانی به ری‌اکت اتصال دهیم. بنابراین تابع createStore را از ریداکس ایمپورت می‌کنیم و سپس کامپوننت Toggle و rootReducer خود را که در بخش قبلی ایجاد کردیم، ایمپورت می‌کنیم.

به خاطر داشته باشید، const ما به نام rootReducer همه کاهنده‌ها را در اپلیکیشن در یک کاهنده منفرد نگه‌داری می‌کند. بنابراین store را با استفاده از تابع createStore که قبلاً ایمپورت کرده‌ایم می‌سازیم و آن را به RootReducer ارسال می‌کنیم. در نهایت در گزاره statement مربوط به تابع render همه اپلیکیشن را درون Provider قرار می‌دهیم و store خود را به آن ارسال می‌کنیم.

بدین ترتیب به پایان این مقاله می‌رسیم. شاید این مقاله یک توصیف طولانی برای یک کاربرد بسیار کوچک محسوب شود؛ اما امیدواریم به تفهیم برخی از مفاهیم پایه ریداکس برای شما کمک کرده باشد. شما می‌توانید هرگونه دیدگاه یا پیشنهاد خود را در بخش نظرات با ما در میان بگذارید.

اگر این مطلب برای شما مفید بوده است، آموزش‌های زیر نیز به شما پیشنهاد می‌شوند:

==

telegram
twitter

میثم لطفی

«میثم لطفی» دانش‌آموخته کارشناسی ریاضیات کاربردی و شیفته فناوری به خصوص در حوزه رایانه است. وی در حال حاضر علاوه بر پیگیری همه علاقه‌مندی‌های خود در رشته‌های برنامه‌نویسی، کپی‌رایتینگ و تولید محتوای چندرسانه‌ای، در زمینه نگارش مقالاتی با محوریت نرم‌افزار نیز با مجله فرادرس همکاری دارد.

آیا این مطلب برای شما مفید بود؟

2 نظر در “ریداکس (Redux) — مبانی مقدماتی

نظر شما چیست؟

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *