ನಿಮ್ಮ ಸ್ಟೇಟ್ ಸ್ಟ್ಯಾಕ್ ಅನ್ನು ನಿರ್ಧರಿಸುವ ಪ್ರಶ್ನೆ

Redux ಅನ್ನು React Query ಗೆ ಹೋಲಿಸುವುದನ್ನು ನಿಲ್ಲಿಸಿ.

ನೀವು ಏನನ್ನು ನಿರ್ಮಿಸುತ್ತಿದ್ದೀರಿ ಎಂದು ತಿಳಿಯುವ ಮೊದಲೇ ನಿಮಗೆ ಸುತ್ತಿಗೆ ಬೇಕೆ ಅಥವಾ ಸ್ಕ್ರೂಡ್ರೈವರ್ ಬೇಕೆ ಎಂದು ಕೇಳಿದಂತೆ ಇದು. Redux, React Query, ಮತ್ತು Zustand ಎಲ್ಲವೂ ವಿಭಿನ್ನ ಸಮಸ್ಯೆಗಳನ್ನು ಪರಿಹರಿಸುತ್ತವೆ.

ನಿಜವಾದ ನಿರ್ಧಾರವು ಒಂದು ಪ್ರಶ್ನೆಯಿಂದ ಬರುತ್ತದೆ: ಪ್ರತಿ ಸ್ಟೇಟ್ (state) ನ ಮೂಲ ಸತ್ಯದ (source of truth) ಮಾಲೀಕ ಯಾರು?

ನಿಮ್ಮಲ್ಲಿ ಎರಡು ರೀತಿಯ ಸತ್ಯಗಳಿವೆ.

  1. ಮಾಲೀಕತ್ವದ ಸತ್ಯ (Owned Truth) ಕ್ಲೈಂಟ್ (client) ಮೂಲವಾಗಿದೆ. ಇದು ಈ ಕೆಳಗಿನವುಗಳನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ:
  • ಸೈಡ್‌ಬಾರ್ ತೆರೆದಿದೆಯೇ?
  • ಪ್ರಸ್ತುತ ಥೀಮ್ ಯಾವುದು?
  • ಫಾರ್ಮ್‌ನ ಯಾವ ಹಂತವು ಸಕ್ರಿಯವಾಗಿದೆ? ಈ ಸ್ಟೇಟ್ ನಿಮ್ಮ ಸ್ಥಳೀಯ ನಿರ್ಧಾರಗಳ ಮೇಲೆ ಅವಲಂಬಿತವಾಗಿರುತ್ತದೆ. ಇದನ್ನು ಸರ್ವರ್‌ನೊಂದಿಗೆ ಮರು-ಪರಿಶೀಲಿಸುವ ಅಗತ್ಯವಿಲ್ಲ.
  1. ಸಾಲದ ಸತ್ಯ (Borrowed Truth) ಮೂಲವು ಸರ್ವರ್‌ನಲ್ಲಿರುತ್ತದೆ. ಕ್ಲೈಂಟ್ ಕೇವಲ ಆ ಡೇಟಾದ ಪ್ರತಿಬಿಂಬವನ್ನು ಮಾತ್ರ ಹೊಂದಿರುತ್ತದೆ. ಈ ಡೇಟಾ ನಿಮ್ಮ ಅರಿವಿಲ್ಲದೆಯೇ ಬದಲಾಗಬಹುದು. ನಿಮ್ಮ ಕೆಲಸವೆಂದರೆ ಇವುಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು:
  • Staleness
  • Invalidation
  • Refetching
  • Caching

ಹೆಚ್ಚಿನ ડેವಲಪರ್‌ಗಳು ಎರಡಕ್ಕೂ ಒಂದೇ ಸಾಧನವನ್ನು ಬಳಸುವುದರಿಂದ ಕಷ್ಟಪಡುತ್ತಾರೆ. ನೀವು ಸಾಲದ ಸತ್ಯವನ್ನು ಕ್ಲೈಂಟ್-ಸೈಡ್ ರೆಡ್ಯೂಸರ್‌ನಲ್ಲಿ (client-side reducer) ನಿರ್ವಹಿಸಲು ಪ್ರಯತ್ನಿಸಿದಾಗ, ನೀವು React Query ಅನ್ನು ಸರಿಯಾಗಿ ಬಳಸದೆ ಮತ್ತೆ ಬರೆಯುವಂತಾಗುತ್ತದೆ. ನೀವು ಲೋಡಿಂಗ್ ಸ್ಟೇಟ್‌ಗಳು (loading states), ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ (error handling) ಮತ್ತು ಕ್ಯಾಶಿಂಗ್ ಅನ್ನು ಮ್ಯಾನುಯಲ್ ಆಗಿ ಬರೆಯುತ್ತೀರಿ. ಇದು ಅನಗತ್ಯ ಕೋಡ್‌ನ ದೊಡ್ಡ ಪ್ರಮಾಣವನ್ನು ಸೃಷ್ಟಿಸುತ್ತದೆ.

ಗೆಲ್ಲಲು ಅವುಗಳನ್ನು ವಿಭಜಿಸಿ.

ಸಾಲದ ಸತ್ಯಕ್ಕಾಗಿ React Query ಬಳಸಿ. ಇದು ಕಠಿಣವಾದ ಸಿಂಕ್ರೊನೈಸೇಶನ್ (synchronization) ಕೆಲಸವನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ. ಮಾಲೀಕತ್ವದ ಸತ್ಯಕ್ಕಾಗಿ Zustand ಬಳಸಿ. ಇದು ಯಾವುದೇ ಸಂಕೀರ್ಣತೆ ಇಲ್ಲದೆ ಸರಳ ಮೌಲ್ಯ ಸಂಗ್ರಹಣೆಯನ್ನು ನಿರ್ವಹಿಸುತ್ತದೆ.

ಸರ್ವರ್ ಡೇಟಾವನ್ನು Zustand ಗೆ ಹಾಕಬೇಡಿ. ಆ ಗಡಿಯನ್ನು ಸ್ಪಷ್ಟವಾಗಿ ಇರಿಸಿ.

Redux ಮತ್ತು Sagas ಬಗ್ಗೆ ಏನು? Sagas ಡೇಟಾ ಫೆಚಿಂಗ್ (data fetching) ಗಾಗಿ ಅಲ್ಲ. ಅವು ಕಾಲಾನಂತರದಲ್ಲಿ ಸಂಕೀರ್ಣ ಪ್ರಕ್ರಿಯೆಗಳನ್ನು ಸಂಘಟಿಸಲು (orchestrating) ಬಳಕೆಯಾಗುತ್ತವೆ. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಇವುಗಳನ್ನು ನಿರ್ವಹಿಸಿದರೆ ಅವುಗಳನ್ನು ಬಳಸಿ:

  • Concurrent, cancellable flows.
  • Real-time websocket streams.
  • Complex state machines.

ನೀವು React Query ಬಳಸುತ್ತಿದ್ದರೆ ಮತ್ತು ನಿಮ್ಮ Sagas ಏನನ್ನೂ ಮಾಡದಿದ್ದರೆ, ನಿಮಗೆ ಅವುಗಳ ಅಗತ್ಯವಿಲ್ಲ.

ಮೂರನೇ ದಾರಿ ಇದೆ: ಏಕೀಕರಣ (Unification). RTK Query ಮತ್ತು Redux ಎಲ್ಲವನ್ನೂ ಒಂದೇ ಸ್ಟೋರ್‌ನಲ್ಲಿ ಇರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ನಿಮ್ಮ ಇಡೀ ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಂದೇ ಸ್ನ್ಯಾಪ್‌ಶಾಟ್ ಅನ್ನು ನೀಡುತ್ತದೆ. ಇದು ಡಿಬಗ್ಗಿಂಗ್ (debugging), ಲಾಗ್ ಔಟ್ ಮತ್ತು ಆಫ್‌ಲೈನ್ ಪರ್ಸಿಸ್ಟೆನ್ಸ್ ಅನ್ನು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.

ನಿಮ್ಮ ಅಗತ್ಯಗಳ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ಹಾದಿಯನ್ನು ಆರಿಸಿ:

  • React Query + Zustand: ಕಡಿಮೆ ಸಂಕೀರ್ಣತೆ ಬೇಕಾದ ಸಣ್ಣ ತಂಡಗಳಿಗೆ ಉತ್ತಮ.
  • Redux + Sagas: ಟ್ರೇಡಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಂತಹ ಹೆಚ್ಚಿನ ಕನ್ಕರನ್ಸಿ (high-concurrency) ಇರುವ ಡೊಮೇನ್‌ಗಳಿಗೆ ಉತ್ತಮ.
  • RTK Only: ಏಕೈಕ ಮೂಲ ಸತ್ಯದ (single source of truth) ಅಗತ್ಯವಿರುವ ದೊಡ್ಡ ಎಂಟರ್‌ಪ್ರೈಸ್ ತಂಡಗಳಿಗೆ ಉತ್ತಮ.

ನೀವು ಒಂದು ಸಾಧನವನ್ನು ಆರಿಸುವ ಮೊದಲು, ಸ್ಟೇಟ್ ನಿಜವಾಗಿಯೂ ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ಇರಬೇಕೇ ಎಂದು ಕೇಳಿಕೊಳ್ಳಿ. ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು (Server Components) ಈ ಲಾಜಿಕ್‌ನ ಹೆಚ್ಚಿನ ಭಾಗವನ್ನು ಮತ್ತೆ ಸರ್ವರ್‌ಗೆ ವರ್ಗಾಯಿಸುತ್ತಿವೆ.

ಮೊದಲು ಸತ್ಯದ ಮಾಲೀಕ ಯಾರು ಎಂದು ಪತ್ತೆಹಚ್ಚಿ. ಸಾಧನವು ತಾನಾಗಿಯೇ ಬರುತ್ತದೆ.

ಮೂಲ: https://dev.to/khaledmsalem/the-question-that-actually-decides-your-state-stack-its-not-redux-or-react-query-49gp