5月30日 00:37

React Query 和 Redux 有什么区别?什么时候该用 React Query?

React Query 管服务器状态,Redux 管客户端状态。服务器状态来自后端,会过期、要缓存、要重试、要和接口同步;客户端状态只存在前端,比如弹窗开关、主题、复杂表单流程。项目里常见做法不是二选一,而是用 React Query 处理接口数据,用 Redux、Zustand 或 Context 处理真正的全局 UI 状态。

追问

React Query 能替代 Redux 吗?

只能替代一大部分“把接口数据塞进 Redux”的写法。购物车草稿、权限后的菜单展开状态、跨页面编辑流程这类客户端状态,React Query 不负责。

为什么接口数据不适合直接放 Redux?

你要自己写 loading、error、缓存过期、重复请求合并、重试和失效逻辑。React Query 把这些变成默认能力,代码量少很多。

什么时候还应该用 Redux?

当状态更新规则复杂、多个模块共享同一份前端状态、需要严格可追踪的状态变更时,Redux 仍然合适。已经重度使用 Redux Toolkit 的项目,也可以考虑 RTK Query。

两者一起用会不会混乱?

不会,边界划清就行:接口返回的数据归 React Query,用户在页面上的交互状态归客户端状态库。最怕的是同一份数据两边各存一份。

写段代码

javascript
const { data: user } = useQuery({ queryKey: ['user', id], queryFn: () => fetchUser(id), }); const theme = useSelector(state => state.ui.theme);
标签:React