آموزش ریداکس در ریکت – قسمت دوم

همه ی برنامه نویس هایی که با جاوا اسکریپت کار کردن اسم ریکت react یا reactJs رو شنیدن. ریکت یه کتابخانه است که برای راحت تر کردن کار UI طراحی شده. این مجموعه توسط فیسبوک جمع آوری شده و توی کل دنیا کار برنامه نویس ها رو راحت تر کرده. در این مطلب همراه رستاوا آکادمی باشید تا با هم یه آموزش ریکت در ریداکس ساده رو داشته باشیم.

آموزش ریداکس در ریکت : آشنایی با مفهوم reducer ها در ریداکس

reducer چیست؟

reducer در ریداکس یک تابع جاوا اسکریپتی است، همین! این تابع دو پارامتر می‌گیرد: state فعلی و action. (بزودی با action ها آشنا می‌شویم.)

در یک کامپوننت satetful، هر بخش از state ایی را که درون خود کامپوننت تعریف کرده ایم می‌توانیم در لحظه تغییر دهیم (مثل تغییر مقدار یک خاصیت درون یک شی جاواسکریپتی). اما در یداکس مجاز به انجام چنین کاری نیستیم. سومین اصل ریداکس که توسط سازنده آن (Dan Abramov بزرگ) مورد اشاره قرار گرفته تشریح می‌کند که satet قابل تغییر نیست و نمی‌تواند در لحظه تغییر کند.(به عبارت دیگر استیت‌ها در ریداکس immutable هستند)

به عبارت دیگر reducer باید یک تابع خالص (pure) باشد. یک تابع خالص تابعی است که به ازای ورودی ثابت داده شده، هربار دقیقا خروجی یکسانی تولید کند. علی‌رغم این تعاریف، خواهید دید که درک reducer چندان سخت نیست.
در مثال این درس، یک reducer ساده خواهیم ساخت که استیت اولیه و اکشن را به عنوان پارامتر خواهد گرفت. برای reducer مان یک فولدر بسازید:

mkdir -p src/js/reducers

سپس یک فایل جدید در src/js/reducers/index.js بسازید:

const initialState = {
	articles: []
};
function rootReducer(state = initialState, action) {
	return state;
};
export default rootReducer;

خوب دقت کنید که چگونه استیت اولیه به عنوان مقدار پیش فرض برای پارامتر اول به reducer ارسال شده است. فعلا reducer‌ مان کاری جز بازگرداندن استیت اولیه انجام نمی‌دهد.

در گام بعدی یک اکشن را به کدهای reducer بالا اضافه می‌کنیم و ماجرا جالب‌تر خواهد شد 😊

آشنایی با action ها در ریداکس و ایجاد ثوابت (named constants)

reducer های ریداکس بدون تردید مهم‌ترین مفهوم در ریداکس هستند. استیت های یک برنامه را reducer ها تولید می‌کنند. اما یک reducer چگونه می‌فهمد که چه زمانی باید استیت بعدی را تولید کند؟

دومین اصل ریداکس می‌گوید تنها راه برای تغییر استیت، ارسال یک سیگنال به استور است. این سیگنال دقیقا چیست؟ این سیگنال یک اکشن است. بنابراین انتشار یک اکشن (dispatching an action) به معنای ارسال یک سیگنال به استور است.

گیج شدید نه؟ بزارید مفهوم اکشن ها را ساده‌تر کنیم. اکشن‌های ریداکس چیزی جر اشیا جاوااسکریپت نیستند! یک اکشن نوعی چنین ظاهری خواهد داشت:

{
	type: 'ADD_ARTICLE',
	payload: { title: 'React Redux Tutorial', id: 1 }
}

همان‌طور که می‌بینید با یک شی جاواسکریپتی روبرو هستیم که شامل دو خاصیت type و payload است.
خصوصیت type تعیین می‌کند که استیت باید چگونه تغییر کند، وجود این خاصیت در اکشن ها الزامی است. خاصیت payload تعیین می‌کند که چه چیزهایی باید تغییر کنند.

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

یک فولدر برای اکشن ها بسازید:

mkdir -p src/js/actions

سپس یک فایل جدید در src/js/actions/index.js بسازید:

// src/js/actions/index.js
export function addArticle(payload) {
return { type: "ADD_ARTICLE", payload }

همانطور که می‌بینید خاصیت type یک رشته است. در رشته ها همواره احتمال اشتباه تایپی وجود دارد و به همین خاطر بهتر است که اکشن ها را در قالب ثوابت (constants) اعلان کنیم. یک فولدر جدید برای ثوابت بسازید:

mkdir -p src/js/constants

سپس یک فایل جدید بنام src/js/constants/action-types.js بسازید:

// src/js/constants/action-types.js
export const ADD_ARTICLE = "ADD_ARTICLE";

سپس دوباره فایل src/js/actions/index.js را باز کنید و اکشن را برای استفادده از مقادیر ثایت بروز کنید:

// src/js/actions/index.js
import { ADD_ARTICLE } from "../constants/action-types";
export function addArticle(payload) {
	return { type: ADD_ARTICLE, payload };
}

هامنطور که میبنید برای استفاده از ریداکس باید از چندین فایل استفاده کنیم و این نکته ای است که خیلی از افراد را موقع استفاده از ریداکس آزار می‌دهد. شما می‌توانید از قوانین قراردادی Redux duck استفاده کنید، این قرارداد تمامی تکه‌ کدهای مرتبط به ریداکس را فقط درون یک فایل نگه داری می‌کند.

یک گام به داشتن یک برنامه ریداکسی نزدیک‌تر شدیم، اما ابتدا لازم هست تا کمی reducer را دست‌کاری کنیم تا بتواند اکشن جدید را دریافت کند. در ادامه آموزش ریداکس در ریکت همراه ما باشید.

ریفکتور کردن reducer

بخش قبلی را با این پرسش رها کردیم: reducer چگونه می‌فهمد که چه زمانی باید استیت بعدی را تولید کند؟ نکته کلیدی در اینجا استور ریداکس است. موقعی که یک اکشن مخابره (dispatch) میشود، استور یک پیام (شی action) را به reducer ارسال میکند.

در این لحظه reducer می‌گوید: “اوه، بزار خاصیت type این اکشن رو چک کنم.” سپس براساس مقدار این خاصیت، reducer استیت بعدی را (با ادغام کردن خاصیت payload در استیت جدید) تولید می‌کند.

پیشتر یک reducer ساختیم که کار خاصی انجام نمی‌داد. بزارید درستش کنیم! فایل src/js/reducers/index.js را باز کنید و reducer با با یک statement برای چک کردن action type به‌روز کنیم:

// src/js/reducers/index.js
import { ADD_ARTICLE } from "../constants/action-types";
const initialState = {
	articles: []
};
function rootReducer(state = initialState, action) {
	if (action.type === ADD_ARTICLE) {
		state.articles.push(action.payload);
	}
	return state;
}
export default rootReducer;

همان‌طور که می‌بینید در یکی از خطوط بالا action payload را توسط تابع push جاوااسکریپت به استیت اولیه اضافه کرده‌ایم. بنظر می‌آید که استیت را به روش درستی به‌روز کرده‌ایم. اما این روش اشتباه است! این reducer ما اصلی ترین قاعده ریداکس را نادیده گرفته است: اصل immutability یا اصل تغییرناپذیری.

نظرتون راجب به این آموزش ریداکس چی بود؟ سوال یا پیشنهادی ندارین؟ توی کامنتا با ما در ارتباط باشید.

مقالات مرتبط:

آموزش جامع ریداکس (Redux) در ری اکت (React) – قسمت اول آموزش جامع برنامه نویسی پایتون (1) آموزش جنگو Django آموزش رایگان جاوا اسکریپت