فرادرسبهبود Reducer–های ریداکس به ۳ روش مختلف – به زبان ساده
در این مقاله به بررسی چگونگی بهبود Reducer-های ریداکس به 3 روش مختلف با استفاده از اشیا، کلاس‌ها و برنامهنویسی تابعی می‌پردازیم. پیش‌فرض ما این است که شما با «ریداکس» (Redux) (+) و کاری که Reducer-ها انجام می‌دهند آشنایی دارید. تلاش ما بر این است که Reducer-های ریداکس را سریع‌تر سازیم و از دریافت هشدار یا خطای «پیچیدگی چرخه‌ای» (cyclomatic complexity) جلوگیری کنیم. این نوع پیچیدگی‌ها ممکن است در چیزهایی مانند SonarQube زمانی که تعداد اکشن‌ها افزایش می‌یابند رخ دهند.
در ادامه مثالی از گزاره switch می‌بینید که احتمالاً در 99% مثال‌های Redux یا Reducer-ها دیده‌اید:
ما قصد داریم این مثال را با استفاده از dictionary بهبود بخشیم.
دیکشنری (جفت کلید-مقدار)
دیکشنری صرفاً یک شیء جاوا اسکریپت است که می‌توان مقدار رشته‌ای را به عنوان کلید به آن اضافه کرده و مقداری به آن انتساب داد.
در ادامه نسخه ساده‌شده‌ای از ازآنچه قصد داریم بسازیم را می‌بینید. توجه کنید که کلید نام type اکشن و مقدار انتسابی تابعی است که حالت کنونی و payload را به عنوان آرگومان می‌گیرد تا یک حالت جدید بسازد.
رویکرد تابعی جاوا اسکریپت
مثال دیکشنری را با ایجاد تابع baseReducer که یک initialState به عنوان آرگومان نخست و یک دیکشنری به عنوان آرگومان دوم دریافت می‌کند، بهبود می‌بخشیم. خوشبختانه خواندن و درک کد زیر آسان است، چون از ثابت نوع اکشن به عنوان نام تابع استفاده می‌کنیم.
در کد فوق پارامتر reducerDictionary دیکشنری است که ارسال کرده‌ایم. توجه کنید که چگونه از action.type در اینجا استفاده کرده‌ایم. reducer[action.type] برای دریافت تابع Reducer صحیح استفاده می‌شود.
رویکرد کلاس جاوا اسکریپت
در ادامه مثال دیکشنری را با ایجاد کلاس BaseReducer برای بسط Reducer-های کلاس خود بهبود می‌بخشیم. در کد زیر به شیوه بسط BaseReducer از سوی ShowsReducer توجه کنید. این وراثت است و بخشی از منطقی کلاس دیگر را تجرید می‌کند به طوری که Reducer-ها تنها بخش مورد نیاز خود را به دست می‌آورند.
اگر به BaseReducer فوق نگاه کنید موارد زیر را می‌بینید:
- در خط 2 initialState وجود دارد که وقتی کلاس Reducer این BaseReducer را بسط دهد، باطل می‌شود.
- در خط 4 متد Reducer وجود دارد که از سوی ریداکس استفاده خواهد شد.
- در خط 5 به متد کلاسی که با action.type تطبیق می‌یابد دسترسی پیدا می‌کنیم.
- در خط 7 اگر متد پیدا نشود یا اگر اکشن به صورت خطا باشد، state کنونی بازگشت می‌یابد.
- خط 11 متد پیدا شده را با آرگومان‌های state و action فراخوانی کرده و state تغییر یافته را که ریداکس مورد استفاده قرار خواهد داد بازگشت می‌دهد.
بدین ترتیب به پایان این مقاله با موضوع بررسی روش‌های بهبود Reducer-های ریداکس می‌رسیم.
اگر این مطلب برای شما مفید بوده است، آموزشهای زیر نیز به شما پیشنهاد می‌شوند:
- مجموعه آموزشهای JavaScript (جاوا اسکریپت)
- مجموعه آموزشهای برنامهنویسی
- آموزش JavaScript ES6 (جاوا اسکریپت)
- آموزش جاوا اسکریپت — مجموعه مقالات جامع وبلاگ فرادرس
- راهنمای مقدماتی ریداکس (Redux) — به زبان ساده
==
