Redux எளிமையான சொற்களில் எவ்வாறு செயல்படுகிறது

React components-களுக்கு இடையே தரவை (data) பரிமாறிக் கொள்வது பெரும்பாலும் ஒரு 'தொலைபேசி விளையாட்டு' (game of telephone) போலத் தோன்றும். நீங்கள் ஒரு parent-லிருந்து child-க்கும், அங்கிருந்து grandchild-க்கும் தரவை அனுப்பிக்கொண்டே இருப்பீர்கள். உங்கள் app வளர வளர இது குழப்பமானதாக மாறும்.

Redux இதைத் தீர்க்கிறது. இது ஒரு 'ஒற்றை உண்மை ஆதாரம்' (single source of truth)-ஐ உருவாக்குகிறது. சிதறிக்கிடக்கும் தரவுகளுக்குப் பதிலாக, அனைத்தும் ஒரு மையக் கிடங்கில் (central vault) சேமிக்கப்படுகின்றன.

Redux-ஐப் புரிந்துகொள்ள ஒரு காபி ஷாப்பை உதாரணமாகக் கற்பனை செய்து பாருங்கள்.

The Store (மையக் கிடங்கு) இது அந்த கடைக்கான கணக்குப் புத்தகம் போன்றது. இது காபி கொட்டைகளின் எண்ணிக்கை, ஆர்டர்கள் மற்றும் பணியாளர்களின் பட்டியலைத் துல்லியமாகக் கண்காணிக்கிறது.

The Action (ஆர்டர்) ஒரு வாடிக்கையாளர் கவுண்டரில் இருந்து நேரடியாக ஒரு லேட்டேயை (latte) எடுத்துக்கொள்ள மாட்டார். அவர்கள் ஒரு ஆர்டர் செய்வார்கள். ஒரு action என்பது என்ன நடந்தது என்பதை விவரிக்கும் ஒரு எளிய object ஆகும். Example: { type: 'ADD_TODO', text: 'Buy Milk' }

The Reducer (பாரிஸ்டா) கணக்குப் புத்தகத்தைப் புதுப்பிக்கும் ஒரே நபர் பாரிஸ்டா மட்டுமே. அவர்கள் தற்போதைய நிலை (current state) மற்றும் புதிய ஆர்டர் ஆகிய இரண்டையும் எடுத்துக்கொண்டு, கணக்குப் புத்தகத்தின் புதிய பதிப்பை (new version) உருவாக்குகிறார்கள்.

The Dispatch (கேஷியர்) கேஷியர் உங்கள் ஆர்டரை எடுத்து பாரிஸ்டாவிற்கு வழங்குகிறார். Dispatch என்பது உங்கள் action-ஐ store-க்கு அனுப்பும் ஒரு function ஆகும்.

Why use Redux?

உங்கள் app பயனர் விவரங்கள் (user profiles) அல்லது ஷாப்பிங் கார்டுகளைக் கொண்ட அளவில் விரிவடையும் போது, ஒரு மையக் கிடங்கு (central store) பிழைத்திருத்தத்தை (debugging) எளிதாக்குகிறது. தரவு எப்போது மற்றும் ஏன் மாறியது என்பதை உங்கள் action history மூலம் நீங்கள் பார்க்க முடியும். இது உங்கள் இணையதளத்திற்கான ஒரு 'பிளைட் ரெக்கார்டர்' (flight recorder) போலச் செயல்படுகிறது.

Summary:

• Action: ஒரு மாற்றத்தை விவரிக்கும் குறிப்பு. • Reducer: மாற்றத்தைச் செய்யும் தர்க்கம் (logic). • Dispatch: action-ஐ தர்க்கத்திற்கு (logic) அனுப்பும் தூண்டுதல்.

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