ریداکس - Redux چیست؟

ریداکس یک کتابخانه جاوا اسکریپتی برای مدیریت State است. اگرچه این کتابخانه اغلب همراه با فریم ورک React مورد استفاده‌ی توسعه دهندگان قرار می‌گیرد ولی امکان استفاده از آن در کنار دیگر فریم ورک‌ها و کتابخانه‌های جاوا اسکریپت نیز امکان پذیر است و ما می‌توانیم از ریداکس در برنامه‌های انگولار (Angular) و React Native هم استفاده کنیم و Stateهای خود را مدیریت کنیم. Redux با توجه به Dependencies حدود 2 کیلوبایت حجم دارد، بنابراین سایز Asset های اپلیکیشن را افزایش نمی دهد.

 ابتدا بهتر است بدانیم مدیریت state به چه معناست.

مدیریت State چیست؟

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

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

این موضوع چه زمانی خودش را نشون می‌دهد؟ زمانی که زیر مجموعه درختی ما بزرگ و بزرگ‌تر شود و مثلا ساختار درختی کامپوننت‌های ما به ده زیر مجموعه برسد و ما بخواهیم یک State را از یک کامپونت بفرستیم به کامپوننت پایین‌تر. در این صورت مجبوریم آن State را به شکل پراپس به تعداد زیادی کامپوننت ارسال کنیم تا به کامپوننت مد نظر برسد.

ریداکس دقیقا چیست و چه کمکی به ما می‌کند؟

طبق تعریف سایت اصلی ریداکس یعنی redux.js.org، ریداکس یک State Container یا یک State Manager است و همان طور که گفته شد کتابخانه‌ای است که state ها را برای ما مدیریت می‌کند. یعنی Stateها را به جای این که در یک کامپوننت پدر تعریف کنیم، اون رو در یک Global State Manager تعریف می‌کنیم.

Global State Manager چیست؟

در ریداکس برای راحتی کار ، Stateهایی را که قرار است زیاد از آنها استفاده کنیم یا به عبارتی به صورت Global داخل پروژه‌مان از آنها استفاده کنیم را داخل مخزنی به نام store قرار می‌دهیم.

بنابراین در ریداکس به جای اینکه State را در کامپوننت پدر تعریف کنیم و آن را به شکل props به کامپوننت‌های پایین پاس بدهیم؛ به راحتی خارج از کامپوننت‌ها و داخل استور، Stateها را تعریف می‌کنیم و هر زمان که کامپوننتی به آن State نیاز داشت، مستقیم از همان کامپوننت به استور درخواست می‌زنیم. در این حالت به سادگی و بدون دردسر به state و دیتای مورد نظر دسترسی پیدا کرده و کدهای تمیز‌تری خواهیم داشت.

از طرفی، گاهی ممکن است که بخواهیم Stateها را تغییر بدهیم زیرا این State‌ها ثابت نیستند. در این حالت اگر از ریداکس استفاده نکنیم، مجبوریم در کامپوننت پدر چند تابع برای تغییر State تعریف کنیم و آنها را هم به کامپوننت‌های پایین‌تر پاس بدهیم. اما با استفاده از ریداکس، در store روند تغییر State داخل خود ریداکس انجام می‌شود و دیگر نیازی به تعریف تابع و پاس دادن آن به کامپوننت‌های پایین‌تر نیست.

چه زمانی از ریداکس استفاده نکنیم؟

 طبق توصیه ای که خود ریداکس داشته تا زمانی که نیاز پیدا نکردید از ریداکس استفاده نکنید چون:

1. حجم اضافی به پروژه‌‌ی خود اضافه می‌کنید.
2. ممکنه یک سری پیچیدگی‌هایی به پروژه‌تون اضافه کنید که نیازی بهش ندارید.

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

چه زمانی استفاده از ریداکس لازم است؟

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

جمع بندی

بیشتر کتابخانه ها نظیر React ،Angular و غیره ویژگی هایی دارند که به  کامپوننت ها این امکان را می‌دهد تا به صورت داخلی و بدون دخالت هرگونه ابزار بیرونی، حالت (State) خود را مدیریت کنند. این موضوع برای اپلیکیشن‌هایی که کامپوننت های کم تعدادی دارند صدق می‌کند اما هرچقدر که یک پروژه بزرگتر می‌شود مدیریت State اشتراکی بین کامپوننت‌های آن امری بسیار گیج کننده و دشوار خواهد شد. در اینجاست که ریداکس به کمک ما می‌آید. با استفاده از ریداکس، State های اپلیکیشن در یک مخزن نگهداری می‌شوند و دسترسی هر کامپوننت به تمامی State ها نیز امکان پذیر است.

نحوه کارکرد Redux بسیار ساده است و همانطور که گفته شد یک مخزن مرکزی تمام State های یک اپلیکیشن را در خود ذخیره می کند و هر کدام از کامپوننت ها بدون نیاز به ارسال props، می توانند به State های ذخیره شده دسترسی داشته باشند. 

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