Zustand ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

State management ಹೆಚ್ಚಾಗಿ ತುಂಬಾ ಸಂಕೀರ್ಣವಾಗಿ ಅನಿಸುತ್ತದೆ.

ನಿಮಗೆ React useState ಅನ್ನು ಹೇಗೆ ಬಳಸಬೇಕೆಂದು ತಿಳಿದಿದೆ. ನಿಮಗೆ props ಅನ್ನು ಹೇಗೆ ವರ್ಗಾಯಿಸಬೇಕೆಂದು (pass) ತಿಳಿದಿದೆ. ನಿಮಗೆ state ಅನ್ನು ಹೇಗೆ ಮೇಲಕ್ಕೆ ಏರಿಸಬೇಕೆಂದು (lift state up) ತಿಳಿದಿದೆ.

ಆದರೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಬೆಳೆದಂತೆ ಎಲ್ಲವೂ ಹದಗೆಡುತ್ತದೆ. ನಿಮಗೆ ಅಗತ್ಯವಿಲ್ಲದ components ಮೂಲಕ ನೀವು ಡೇಟಾವನ್ನು ವರ್ಗಾಯಿಸಲು ಪ್ರಾರಂಭಿಸುತ್ತೀರಿ. ಇದನ್ನೇ 'prop drilling' ಎನ್ನಲಾಗುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅಸ್ತವ್ಯಸ್ತಗೊಳಿಸುತ್ತದೆ ಮತ್ತು ನಿರ್ವಹಿಸುವುದನ್ನು ಕಷ್ಟವಾಗಿಸುತ್ತದೆ.

Zustand ಇದನ್ನು ಪರಿಹರಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ React components ಹೊರಗೆ ಒಂದು ಹಂಚಿಕೆಯ state ಅನ್ನು ನೀಡುತ್ತದೆ.

ಇದನ್ನು ಈ ರೀತಿ ಯೋಚಿಸಿ:

Zustand ಇಲ್ಲದೆ: Component A ತನ್ನ props ಅನ್ನು B ಗೆ ನೀಡುತ್ತದೆ, B ತನ್ನನ್ನು C ಗೆ ನೀಡುತ್ತದೆ, ಮತ್ತು C ತನ್ನನ್ನು D ಗೆ ನೀಡುತ್ತದೆ.

Zustand ಇರುವುದರಿಂದ: ಪ್ರತಿಯೊಂದು component ನೇರವಾಗಿ ಒಂದು ಕೇಂದ್ರ ಶೇಖರಣಾ ಘಟಕಕ್ಕೆ (central store) ಸಂಪರ್ಕ ಸಾಧಿಸುತ್ತದೆ. ಯಾವುದೇ ಮಧ್ಯವರ್ತಿಗಳಿಲ್ಲ. ಯಾವುದೇ prop drilling ಇಲ್ಲ.

ಒಂದು Zustand store ಎರಡು ವಿಷಯಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:

  • State: ನಿಮ್ಮ ಡೇಟಾ.
  • Actions: ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಬದಲಾಯಿಸುವ ಫಂಕ್ಷನ್‌ಗಳು.

ಅಷ್ಟೇ ಇಷ್ಟೇ.

Zustand ವೇಗವಾಗಿದೆ ಏಕೆಂದರೆ ಇದು ಬದಲಾದ ನಿರ್ದಿಷ್ಟ ಡೇಟಾವನ್ನು ಬಳಸುವ components ಅನ್ನು ಮಾತ್ರ ಮತ್ತೆ ರನ್ (re-render) ಮಾಡುತ್ತದೆ.

ನಿಮ್ಮ ಡೇಟಾ ಪೇಜ್ ರಿಫ್ರೆಶ್ ಆದಾಗಲೂ ಉಳಿಯಬೇಕೆಂದರೆ, localStorage ಬಳಸಿ. localStorage ಕೇವಲ ಸ್ಟ್ರಿಂಗ್‌ಗಳನ್ನು (strings) ಮಾತ್ರ ಸಂಗ್ರಹಿಸುವುದರಿಂದ, ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಉಳಿಸಲು ನೀವು JSON.stringify ಅನ್ನು ಮತ್ತು ಅವುಗಳನ್ನು ಓದಲು JSON.parse ಅನ್ನು ಬಳಸಬೇಕು.

ಒಂದು auth store ಅನ್ನು ರಚಿಸಲು ಇಲ್ಲಿದೆ ಒಂದು ಸರಳ ವಿಧಾನ:

  • ಬಳಕೆದಾರರು (user) ಮತ್ತು ಟೋಕನ್ ಅನ್ನು localStorage ನಲ್ಲಿ ಸಂಗ್ರಹಿಸಿ.
  • ಸ್ಟೋರ್ ಮತ್ತು ಬ್ರೌಸರ್ ಸ್ಟೋರೇಜ್ ಅನ್ನು ಅಪ್‌ಡೇಟ್ ಮಾಡಲು ಒಂದು login ಫಂಕ್ಷನ್ ಬಳಸಿ.
  • ಎರಡನ್ನೂ ಅಳಿಸಲು ಒಂದು logout ಫಂಕ್ಷನ್ ಬಳಸಿ.

ಇದು Redux ಗೆ ಹೇಗೆ ಹೋಲಿಕೆಯಾಗುತ್ತದೆ?

Redux ಗೆ dispatchers ಮತ್ತು reducers ಬೇಕಾಗುತ್ತವೆ. ಇದು ಹೆಚ್ಚಿನ boilerplate code ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. Zustand ನೇರವಾಗಿ ಒಂದು ಫಂಕ್ಷನ್ ಅನ್ನು ಕರೆಯಲು ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಕಡಿಮೆ ಮಾನಸಿಕ ಹೊರೆ (mental overhead) ಮತ್ತು ಕಡಿಮೆ ಸೆಟಪ್ ಅನ್ನು ಹೊಂದಿದೆ.

ತಪ್ಪಿಸಬೇಕಾದ ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು:

  • create ಫಂಕ್ಷನ್‌ನಲ್ಲಿ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಿಟರ್ನ್ ಮಾಡಲು ಮರೆಯುವುದು. ನಿಮ್ಮ ಆಬ್ಜೆಕ್ಟ್ ಸುತ್ತ ಪೇರೆನ್ಥೆಸಿಸ್ (parentheses) ಬಳಸಿ.
  • ನಿಮ್ಮ state ಆಬ್ಜೆಕ್ಟ್ ಒಳಗೆ ಸೆಮಿಕೋಲನ್‌ಗಳನ್ನು (semicolons) ಬಳಸುವುದು. ಬದಲಿಗೆ ಕಾಮಾಗಳನ್ನು (commas) ಬಳಸಿ.
  • ಈಗಾಗಲೇ ಸ್ಟ್ರಿಂಗ್ ಆಗಿರುವ ಡೇಟಾವನ್ನು ಪಾರ್ಸ್ (parsing) ಮಾಡುವುದು.

State management ಲೈಬ್ರರಿಗಳು ಕೇವಲ state ಅನ್ನು ನಿರ್ವಹಿಸುವುದರ ಬಗ್ಗೆ ಅಲ್ಲ. ಅವು ಸಂಕೀರ್ಣತೆಯನ್ನು (complexity) ನಿರ್ವಹಿಸುವುದರ ಬಗ್ಗೆ ಇವೆ.

ಪ್ರತಿಯೊಂದು API ಅನ್ನು ನೆನಪಿಟ್ಟುಕೊಳ್ಳಲು ಪ್ರಯತ್ನಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ. ಆ ಟೂಲ್ ಯಾವ ಸಮಸ್ಯೆಯನ್ನು ಪರಿಹರಿಸಲು ಪ್ರಯತ್ನಿಸುತ್ತಿದೆ ಎಂಬುದನ್ನು ಗಮನಿಸಲು ಪ್ರಾರಂಭಿಸಿ. ನೀವು ಸಮಸ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಂಡಾಗ, ಆ ಟೂಲ್ ಅರ್ಥಪೂರ್ಣವಾಗಿ ಕಾಣುತ್ತದೆ.

Source: https://dev.to/chinwuba_jeffrey/understanding-zustand-2g11