Redux به زبان ساده چگونه کار میکند
انتقال دادهها بین کامپوننتهای React اغلب شبیه به بازی «تلفنخانه» است. شما دادهها را از والد به فرزند و سپس به نوه منتقل میکنید. با بزرگتر شدن اپلیکیشن، این فرآیند بسیار آشفته و پیچیده میشود.
Redux این مشکل را حل میکند. این ابزار یک «منبع واحد حقیقت» (single source of truth) ایجاد میکند. به جای دادههای پراکنده، همه چیز در یک مخزن مرکزی ذخیره میشود.
برای درک بهتر Redux، یک کافیشاپ را تصور کنید.
The Store (مخزن) این دفتر کلِ کافیشاپ است. این دفتر، تعداد دانههای قهوه، سفارشها و لیست کارکنان را ثبت و پیگیری میکند.
The Action (سفارش)
مشتری یک لاته را مستقیماً از روی پیشخوان برنمیدارد، بلکه سفارش میدهد. یک action شیء سادهای است که توصیف میکند چه اتفاقی افتاده است.
مثال: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer (باریستا) باریستا تنها کسی است که دفتر کل را بهروزرسانی میکند. او وضعیت فعلی (current state) و سفارش جدید را دریافت کرده و سپس نسخه جدیدی از دفتر کل را ایجاد میکند.
The Dispatch (صندوقدار) صندوقدار سفارش شما را میگیرد و به باریستا تحویل میدهد. Dispatch تابعی است که action شما را به store ارسال میکند.
Why use Redux?
وقتی اپلیکیشن شما گسترش مییابد و مواردی مثل پروفایل کاربری یا سبد خرید را شامل میشود، داشتن یک استور مرکزی، عیبیابی (debugging) را آسان میکند. شما میتوانید تاریخچه actionهای خود را بررسی کنید تا ببینید دادهها چه زمانی و چرا تغییر کردهاند. Redux مانند یک جعبه سیاه (flight recorder) برای وبسایت شما عمل میکند.
Summary:
• Action: یادداشتی که یک تغییر را توصیف میکند. • Reducer: منطقی که تغییر را اعمال میکند. • Dispatch: محرکی که action را به آن منطق ارسال میکند.
Source: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp