ضرورت استفاده از redux چیست

ضرورت استفاده از redux چیست نوشته شده در   react 15 دسامبر , 2018 توسط  عباس حسینی

با کمی جستجو در اینترنت به اولین تعریفی که درباره redux برمیخورید A Predictable State Container میباشد یعنی یک محل قابل پیش بینی برای نگهداری state ها خب این تعریف در نگاه اول کمی گنگ است

قابل پیش بینی بودن redux به خاطر این است که شما میدانید همه state ها در یک محل خاص به نام store قرار دارد و تنها را تغییر یک state استفاده از action میباشد

خب با این تفاسیر action ها میتوانند بارها داخل پروژه مورد استفاده قرار بگیرند و با هر بار استفاده دقیقا میدانید که چه تغییری روی state شما اعمال خواهد شد، از این جهت قابل پیش بینی بودن را به redux نسبت داده اند

اگر با redux آشنایی ندارید پیشنهاد میکنم ابتدا لینک های زیر را مطالعه کنید

لینک های مطالعه :

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

جلوگیری از جهنم props : هنگام استفاده از react در حالت عادی اگر بخواهیم یک فرزند به state پدرش دسترسی داشته باشد باید در قالب props آن را برایش ارسال کنیم حال اگر تعداد فرزندانی که باید به یک state از پدرشان دسترسی داشته باشند زیاد باشد باعث تکرار بیش از حد props و در نتیجه به وجود امدن جهنم props میشود

مزایای redux

دسترسی مستقیم یک کامپوننت به state یک کامپوننتی که پدرش نیست : یکی از مهمترین ویژگی های redux این است که یک کامپوننت خارج از ساختار سلسله مراتبی و رابطه پدر فرزندی میتواند به state هر کامپوننت دیگری دسترسی داشته باشد

جایگزینی به عنوان کش : در برخی موارد اتفاق میفتد که که کار انجام شده باید در سرور یا کش کلاینت ذخیره شود تا در دفعات بعدی رجوع کاربر موجود باشد این مقادیر را میتوان با استفاده از reduxمدیریت کرد

جدا کردن business logic از ui : هر کامپوننت react یک بخش اصلی از ui محسوب میشود که با استفاده از action و reducer میتوان منطق سیستم را از کامپوننت ها جدا کرد و این جدا سازی فرآیند توسعه تست و نگهداری کد را بهبود میبخشد
مثلا فرض کنید شما یک لیست دارید که action های delete , add, update قرار است روی آن لیست انجام شود به وسیله redux شما میتوانید براحتی این منطق ها را از کامپوننت جدا کنید

حال برای درک آن به کد زیر توجه کنید که چگونگی جداسازی منطق ها را نشان میدهد


import {ADD,DELETE,UPDATE} from './actions'

function listReducer(state = initialState, action) {
  switch (action.type) {
    case ADD:    
    //Add Logic

    case DELETE: 
    //DELETE Logic

    case UPDATE: 
    //UPDATE Logic

    default:return state
  }
}

نتیجه گیری :

سوال اینجاست که آیا با توجه به قابلیت های context و hooks که در نسخه جدید react ارائه شده آیا استفاده از redux همچنان در پروژه های react کار عاقلانه ای است ؟

در پاسخ باید بگویم redux صرفا فقط یک state manager است که شما میتوانید تصمیم بگیرد در پروژه خود استفاده بکنید یا نه

قابلیت context تنها به ما کمک میکند که انتقال state به لایه های پایین را بدون استفاده از redux براحتی انجام دهیم و قابلیت hooks به ما این امکان رو میده از قابلیت ها و state ها داخل کامپوننت ها بهره ببریم (فقط داخل functional component ها) و طبق مستندات خود react چون اکثر بخش های فیسبوک با کلاس نوشته شده برنامه ای برای بازنویسی آنها ندارند بنابراین احتمال دارد این قابلیت را نیز برای کلاس ها ارائه دهند پس وجود context و  hooks به تنهایی دلیلی بر حذف redux از پروژه های react نمیباشد

 

دقت کنید که قابلیت هایی مثل دسترسی مستقیم هر کامپوننت به state ها ، قابل پیش بینی بودن و  جدا سازی منطق سیستم از ui ، ویژگی هایی هستند که باعث میشوند سراغ کتابخانه ای بنام redux برویم و جلوگیری از ارسال state ها در قالب props و یا دسترسی به state به تنهایی دلیل قانع کننده برای استفاده از redux  نیست

مثلا فرض کنید داخل پروژه خود قرار است با استفاده از right click یک عنصر از یک لیستی را حذف کنیم و داده های این لیست متعلق به state یک کامپوننت میباشد در چنین سناریویی براحتی با استفاده از dispatch کردن یک action براحتی امکان پذیر است

و همچنین توجه کنید که جدا بودن منطق ها در قالب action و reducer ها به ما کمک میکند آن ها را بصورت جداگانه مورد تست قرار دهیم و در صورت وجود خطا به سرعت آن را رفع کنیم