Redux सोप्या भाषेत कसे कार्य करते
React components मध्ये डेटा पास करणे अनेकदा 'गेम ऑफ टेलिफोन' सारखे वाटते. तुम्ही डेटा पालकाकडून (parent) मुलाकडे (child) आणि त्यानंतर नातवाकडे (grandchild) पाठवता. तुमचे ॲप जसजसे मोठे होते, तसतसे हे गोंधळात टाकणारे होऊ शकते.
Redux या समस्येचे निराकरण करते. ते 'single source of truth' तयार करते. विखुरलेल्या डेटाऐवजी, सर्व काही एका मध्यवर्ती तिजोरीत (central vault) साठवले जाते.
Redux समजून घेण्यासाठी एका कॉफी शॉपचा विचार करा.
The Store (तिजोरी) हे दुकानाचा हिशोबाचा उतारा (ledger) आहे. हे कॉफी बीन्सची संख्या, ऑर्डर्स आणि कर्मचाऱ्यांची यादी यांचा मागोवा घेते.
The Action (ऑर्डर)
ग्राहक काउंटरवरून थेट लॅटे (latte) उचलून घेत नाही. ते ऑर्डर देतात. 'Action' ही एक साधी ऑब्जेक्ट (object) आहे जी काय घडले याचे वर्णन करते.
Example: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer (बॅरिस्टा) बॅरिस्टा हा एकमेव व्यक्ती आहे जो हिशोबाचा उतारा अपडेट करतो. ते सध्याची स्थिती (current state) आणि नवीन ऑर्डर घेतात. त्यानंतर ते हिशोबाच्या उताऱ्याची एक नवीन आवृत्ती तयार करतात.
The Dispatch (कॅशियर) कॅशियर तुमची ऑर्डर घेतो आणि ती बॅरिस्टाकडे देतो. 'Dispatch' हे असे फंक्शन आहे जे तुमची action स्टोअरकडे पाठवते.
Redux का वापरावे?
तुमचे ॲप जसजसे वाढते आणि त्यात युजर प्रोफाइल्स किंवा शॉपिंग कार्ट्सचा समावेश होतो, तसतसे मध्यवर्ती स्टोअरमुळे डीबगिंग (debugging) करणे सोपे होते. डेटा कधी आणि का बदलला हे पाहण्यासाठी तुम्ही तुमच्या action history वर लक्ष ठेवू शकता. हे तुमच्या वेबसाइटसाठी 'फ्लाइट रेकॉर्डर'प्रमाणे काम करते.
सारांश:
• Action: बदलाचे वर्णन करणारी एक नोंद. • Reducer: बदल घडवून आणणारे लॉजिक (logic). • Dispatch: लॉजिककडे action पाठवणारे ट्रिगर (trigger).
Source: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp