ಸರಳ ಪದಗಳಲ್ಲಿ Redux ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ
React components ನಡುವೆ ಡೇಟಾವನ್ನು ವರ್ಗಾಯಿಸುವುದು ಹೆಚ್ಚಾಗಿ 'game of telephone' ನಂತೆ ಅನಿಸುತ್ತದೆ. ನೀವು ಡೇಟಾವನ್ನು ಪೋಷಕನಿಂದ (parent) ಮಗನಿಗೆ (child) ಮತ್ತು ನಂತರ ಮೊಮ್ಮಗನಿಗೆ (grandchild) ವರ್ಗಾಯಿಸುತ್ತೀರಿ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಬೆಳೆದಂತೆ ಇದು ಗೊಂದಲಮಯವಾಗುತ್ತದೆ.
Redux ಇದನ್ನು ಪರಿಹರಿಸುತ್ತದೆ. ಇದು 'single source of truth' ಅನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ. ಚದುರಿಹೋದ ಡೇಟಾಗಳ ಬದಲಿಗೆ, ಎಲ್ಲವೂ ಒಂದೇ ಕೇಂದ್ರ ಕೋಶದಲ್ಲಿ (central vault) ಇರುತ್ತದೆ.
Redux ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಒಂದು ಕಾಫಿ ಶಾಪ್ ಅನ್ನು ನೆನಪಿಸಿಕೊಳ್ಳಿ.
The Store (ಕೇಂದ್ರ ಕೋಶ/Vault) ಇದು ಅಂಗಡಿಯ ಲೆಕ್ಕಪತ್ರ ಪುಸ್ತಕ (ledger). ಇದು ಬೀನ್ ಸಂಖ್ಯೆಗಳು, ಆರ್ಡರ್ಗಳು ಮತ್ತು ಸಿಬ್ಬಂದಿ ಪಟ್ಟಿಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುತ್ತದೆ.
The Action (ಆರ್ಡರ್)
ಗ್ರಾಹಕರು ಕೌಂಟರ್ನಿಂದ ನೇರವಾಗಿ ಲಾಟೆಯನ್ನು (latte) ತೆಗೆದುಕೊಳ್ಳುವುದಿಲ್ಲ. ಅವರು ಆರ್ಡರ್ ಮಾಡುತ್ತಾರೆ. Action ಎಂಬುದು ಏನಾಯಿತು ಎಂಬುದನ್ನು ವಿವರಿಸುವ ಒಂದು ಸರಳ ಆಬ್ಜೆಕ್ಟ್ (object).
Example: { type: 'ADD_TODO', text: 'Buy Milk' }
The Reducer (ಬರಿಸ್ಟಾ/Barista) ಬರಿಸ್ಟಾ ಮಾತ್ರ ಲೆಕ್ಕಪತ್ರ ಪುಸ್ತಕವನ್ನು ಅಪ್ಡೇಟ್ ಮಾಡುವ ಏಕೈಕ ವ್ಯಕ್ತಿ. ಅವರು ಪ್ರಸ್ತುತ ಸ್ಥಿತಿ (current state) ಮತ್ತು ಹೊಸ ಆರ್ಡರ್ ಅನ್ನು ತೆಗೆದುಕೊಳ್ಳುತ್ತಾರೆ. ನಂತರ ಅವರು ಲೆಕ್ಕಪತ್ರ ಪುಸ್ತಕದ ಹೊಸ ಆವೃತ್ತಿಯನ್ನು (new version) ಸೃಷ್ಟಿಸುತ್ತಾರೆ.
The Dispatch (ಕ್ಯಾಷಿಯರ್/Cashier) ಕ್ಯಾಷಿಯರ್ ನಿಮ್ಮ ಆರ್ಡರ್ ಅನ್ನು ಪಡೆದು ಬರಿಸ್ಟಾ ಅವರಿಗೆ ನೀಡುತ್ತಾರೆ. Dispatch ಎಂಬುದು ನಿಮ್ಮ action ಅನ್ನು store ಗೆ ಕಳುಹಿಸುವ ಫಂಕ್ಷನ್ (function) ಆಗಿದೆ.
Why use Redux?
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಬಳಕೆದಾರರ ಪ್ರೊಫೈಲ್ಗಳು ಅಥವಾ ಶಾಪಿಂಗ್ ಕಾರ್ಟ್ಗಳನ್ನು ಒಳಗೊಂಡಂತೆ ವಿಸ್ತರಿಸಿದಂತೆ, ಕೇಂದ್ರ ಶೇಖರಣಾ ವ್ಯವಸ್ಥೆಯು (central store) ડીಬಗ್ ಮಾಡುವುದನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ. ಡೇಟಾ ಯಾವಾಗ ಮತ್ತು ಏಕೆ ಬದಲಾಯಿತು ಎಂಬುದನ್ನು ನೋಡಲು ನೀವು ನಿಮ್ಮ action ಇತಿಹಾಸವನ್ನು (history) ಪರಿಶೀಲಿಸಬಹುದು. ಇದು ನಿಮ್ಮ ವೆಬ್ಸೈಟ್ಗೆ 'flight recorder' ನಂತೆ ಕಾರ್ಯನಿರ್ವಹಿಸುತ್ತದೆ.
Summary:
• Action: ಬದಲಾವಣೆಯನ್ನು ವಿವರಿಸುವ ಒಂದು ಟಿಪ್ಪಣಿ. • Reducer: ಬದಲಾವಣೆಯನ್ನು ಮಾಡುವ ತರ್ಕ (logic). • Dispatch: action ಅನ್ನು logic ಗೆ ಕಳುಹಿಸುವ ಟ್ರಿಗರ್ (trigger).
Source: https://dev.to/code_with_aravind/how-redux-works-in-simple-terms-1pkp