Back to Details

state-management

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

State Management

状态管理

Choose the right state solution for each use case.
为每种用例选择合适的状态解决方案。

Activation Conditions

适用场景

  • Managing global state
  • Persisting state across navigation
  • Cross-component data sharing
  • Questions about Zustand vs React Query
  • 管理全局状态
  • 在页面导航间持久化状态
  • 跨组件数据共享
  • 关于Zustand与React Query的对比疑问

Quick Reference

快速参考

ActionRule
Read from store
use-zustand-selectors.md
Persist state
use-zustand-persist.md
Fetch server data
use-react-query-for-server.md
操作参考文档
从store读取数据
use-zustand-selectors.md
持久化状态
use-zustand-persist.md
获取服务端数据
use-react-query-for-server.md

Decision Tree

决策树

Is it server data (API response)?
├── Yes → React Query / Connect Query
│         (caching, refetching, invalidation)
└── No → Is it URL state?
    ├── Yes → React Router
    │         (search params, path params)
    └── No → Is it form state?
        ├── Yes → React Hook Form
        │         (validation, submission)
        └── No → Is it shared across components?
            ├── Yes → Zustand
            │         (global, persisted)
            └── No → useState / useReducer
                      (local component state)
Is it server data (API response)?
├── Yes → React Query / Connect Query
│         (caching, refetching, invalidation)
└── No → Is it URL state?
    ├── Yes → React Router
    │         (search params, path params)
    └── No → Is it form state?
        ├── Yes → React Hook Form
        │         (validation, submission)
        └── No → Is it shared across components?
            ├── Yes → Zustand
            │         (global, persisted)
            └── No → useState / useReducer
                      (local component state)

Rules

规则详情

See 
rules/
directory for detailed guidance.
请查看
rules/
目录获取详细指导。