Redux سادہ الفاظ میں کیسے کام کرتا ہے

React components کے درمیان ڈیٹا منتقل کرنا اکثر "game of telephone" کی طرح محسوس ہوتا ہے۔ آپ ڈیٹا کو ایک پیرنٹ (parent) سے چائلڈ (child) اور پھر گرینڈ چائلڈ (grandchild) تک پہنچاتے ہیں۔ جیسے جیسے آپ کی ایپ بڑھتی ہے، یہ عمل الجھن کا باعث بن جاتا ہے۔

Redux اس مسئلے کو حل کرتا ہے۔ یہ ایک "single source of truth" تخلیق کرتا ہے۔ بکھرے ہوئے ڈیٹا کے بجائے، سب کچھ ایک مرکزی تجوری (central vault) میں محفوظ رہتا ہے۔

Redux کو سمجھنے کے لیے ایک کافی شاپ (coffee shop) کی مثال لیں۔

The Store (تجوری)

یہ دکان کا کھاتہ (ledger) ہے۔ یہ کافی کے بیجوں کی تعداد، آرڈرز اور عملے کی فہرستوں کا حساب رکھتا ہے۔

The Action (آرڈر)

ایک گاہک کاؤنٹر سے خود لاتے (latte) نہیں اٹھاتا، بلکہ وہ آرڈر دیتا ہے۔ Action ایک سادہ آبجیکٹ (object) ہے جو یہ بتاتا ہے کہ کیا ہوا ہے۔ مثال: { type: 'ADD_TODO', text: 'Buy Milk' }

The Reducer (بارسٹا)

بارسٹا وہ واحد شخص ہے جو کھاتے کو اپ ڈیٹ کرتا ہے۔ وہ موجودہ اسٹیٹ (state) اور نیا آرڈر لیتا ہے، اور پھر کھاتے کا ایک نیا ورژن تیار کرتا ہے۔

The Dispatch (کیشیئر)

کیشیئر آپ کا آرڈر لیتا ہے اور اسے بارسٹا تک پہنچاتا ہے۔ Dispatch وہ فنکشن ہے جو آپ کے action کو store تک بھیجتا ہے۔

Redux کیوں استعمال کریں؟

جیسے جیسے آپ کی ایپ صارف کے پروفائلز یا شاپنگ کارٹس (shopping carts) تک پھیلتی ہے، ایک مرکزی اسٹور ڈی بگنگ (debugging) کو آسان بنا دیتا ہے۔ آپ اپنی action کی ہسٹری دیکھ کر یہ جان سکتے ہیں کہ ڈیٹا کب اور کیوں تبدیل ہوا۔ یہ آپ کی ویب سائٹ کے لیے ایک "فلائٹ ریکارڈر" کی طرح کام کرتا ہے۔

خلاصہ:

• Action: تبدیلی کی وضاحت کرنے والا ایک نوٹ۔ • Reducer: وہ لاجک (logic) جو تبدیلی کرتی ہے۔ • Dispatch: وہ ٹرگر (trigger) جو action کو لاجک تک بھیجتا ہے۔

Source: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp