در زبان های برنامه نویس state به ظرف داده ها و مقادیر آنها در هر لحظه زمانی می گویند لذا ریداکس شامل کتابخانه‌ها و Api هایی بر پایه یک الگو جهت مدیریت و بروز رسانی State های عمومی یا گلوبال اپلیکیشن است که قسمت های مختلف اپلیکیشن به آن نیاز دارند.
الگوی ریداکس در در درجه اول شامل یک مخزن برای state های اپلیکیشن های جاوااسکریپت است و state چیزی نیست جز یک Object ساده مانند:
اما اپلیکیشن شما نمی توانند مستقیم این State ها را تغییر بدهند و برای تغییر آن باید یک عملگر ارسال کنید و یا به عبارتی جهت تغییر باید یک Action ارسال یا dispatch نمایند و اکشن هم چیزی نیست جز یک آبجکت ساده مانند آبجکت های زیر که هر کدام آنها یک Action هستند:
خوب ما تا اینجا state داریم و اکشن های مورد نیاز جهت تغییر state ها، مانند شکل فوق به عنوان مثال اکشن اضافه کردن یک todo یا تغییر حالت todo.
اما جهت تغییر state ما به یک فانکش هم نیاز داریم که state و اکشن را بگیرد و تغییر مورد نیاز ما را برروی State انجام دهد که به این فانکش در ریداکس reducer گفته می شود و یا به عبارتی مانند چرخ گوشت state و action را می گیرد و یک state جدید تحویل می دهد.
به عنوان مثال فانکشن reducer جهت تغییر todo ها می تواند به شکل زیر باشد.
به صورت تصویری به مثال زیر توجه فرمایید
در مثال فوق
۱- ابتدا یک اتفاق یا ایونت در UI اتفاق می افتد به عنوان مثال دکمه واریز وجه کلیک می گردد
۲- مدیریت event ها بر پایه کلیک اتفاق افتاده یک اکشن dispatch می کند که همراه این اکشن دیتاهایی به عنوان payload ارسال می گردد (به عنوان مثال مبلغ واریز شده که در اینجا ۱۰ است) و توجه داشته باشید که اکشن نوع deposit است پس هر اکشن حتما باید type یا نوع داشته باشد اما payload اختیاری است.
۳ - در این مرحله فانکش reducer اکشن را می می گیرد و با توجه به نوع آن تغییرات روی state را انجام می دهد و state جدید را در مخزن یا store ریداکس ذخیره می کند و یا به عبارتی state ریداکس را بر پایه اکشن اتفاق افتاده بروز رسانی می گردد.
۴ - در این مرحله state بروز رسانی شده آماده استفاده تمامی اجزای اپلکیشن است که در اینجا همانطور که می بینیم حساب نامبرده ۱۰ واحد شارژ شده است.
کل پایه ایده یا الگو مدیریت state های ریداکس همین است و به طور خلاصه ما یک آبجکت State داریم و چندین اکشن که با ارسال آنها به فانکش reducer می توانیم state ها را تغییر دهیم و در تمام اپلیکیشن از آنها استفاده نماییم.
حال جهت پیاده سازی این الگو و تسهیل استفاده از این الگو ریداکس علاوه بر خود کتابخانه ریداکس کتابخانه ها و API های با نام های زیر را نیز در اختیار ما قرار داده است که در قسمت های بعدی با مثال و ویدوئوهای آموزشی آنها را توضیح خواهیم داد.
۱ - کتابخانه React-Redux
۲- کتابخانه Redux Toolkit
۳- کتابخانه Redux DevTools
