React Query和 Redux 之间的主要区别是什么？

React Query 和 Redux 是两个用于在React应用程序中管理状态的库，但它们的关注点和使用场景有一些显著的区别。

设计目的 :

数据缓存和失效 :

数据同步和更新 :

配置和样板代码 :

开发哲学 :

社区和生态 :

假设你的应用需要从一个REST API获取用户列表，并且你希望显示的数据是最新的。使用 React Query ，你可以这样做：

jsx
import { useQuery } from 'react-query';
function UsersComponent() {
  const { data, error, isLoading } = useQuery('users', fetchUsers);
  // Render your UI based on the data, error, and loading state...
在这个例子中，fetchUsers是一个异步函数，它向API请求数据。useQuery会自动处理数据的加载、缓存、重载和更新。
而在Redux中，你可能需要创建actions和reducers来处理异步请求，并使用例如redux-thunk的中间件来处理异步逻辑：
jsx




    
import { useDispatch, useSelector } from 'react-redux';
function UsersComponent() {
  const dispatch = useDispatch();
  const { users, error, isLoading } = useSelector(state => state.users);
  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);
  // Render your UI based on the users, error, and loading state...
React Query 和 Redux 是两种不同类型的库，它们在React应用程序中承担着不同的角色。
**React Query** 是一个用于数据获取、缓存、同步和更新的库。它专注于处理异步数据操作，如从API检索数据、缓存结果以及自动重新获取数据。以下是React Query的一些关键特点：
- **自动缓存和无效化**：React Query自动缓存每次请求的结果，并在数据变化时提供重新获取数据的机制。
- **后台同步**：支持在数据变化或用户与应用程序互动时，自动在后台更新数据。
- **查询状态**: React Query 提供了丰富的状态信息，包括加载状态、错误状态、数据状态等，方便在UI中展示。
- **最小的全局状态管理**：React Query的目标是用最小的配置管理服务器状态。
**Redux** 是一个为JavaScript应用程序提供可预测状态容器的库，特别适合在React中使用。它主要用于管理和维护应用程序的全局状态，并提供一种模式来更新和访问这个状态。以下是Redux的一些关键特点：
- **全局状态管理**：Redux提供单一的全局状态树，所有状态的变化都通过派发行为(action)和归约器(reducers)的方式来管理。
- **可预测性**：因为所有的状态变化都遵循一个明确的流程，所以应用程序的行为是可预测的。
- **中间件**：Redux 支持使用中间件来扩展其功能，比如异步调用、日志记录等。
- **开发工具**：Redux拥有强大的开发工具，如Redux DevTools，可以帮助开发者追踪状态的变化和行为的派发。
**主要区别**：
1. **用途**：React Query主要用于数据同步，而Redux用于全局状态管理。
2. **数据管理**：React Query内置了数据获取和缓存的机制，而Redux需要开发者手动管理数据请求和响应结果。
3. **状态同步**：React Query提供自动的数据同步机制，Redux则需要结合额外的库（如redux-thunk或redux-saga）来处理异步逻辑。
4. **配置**：React Query减少了配置和样板代码的需要，Redux则需要更多的样板代码和配置步骤。
5. **开发体验**：React Query 的API设计更贴近React的hooks模式，而Redux通常需要遵循特定的设计模式和最佳实践。
例如，如果我们有一个用户列表，并且我们想通过React Query来获取这些用户，我们可能会这样做：
```javascript
import { useQuery } from 'react-query';
function Users() {
  const { isLoading, error, data } = useQuery('fetchUsers', fetchUsersApi);
  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  return (
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
async function fetchUsersApi() {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  return response.json();
使用Redux处理相同的数据获取，我们需要编写action creators、reducers以及相应的async action handlers：
javascript




    
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider, useDispatch, useSelector } from 'react-redux';
// Action types
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';
const FETCH_USERS_SUCCESS = 'FETCH_USERS_SUCCESS';
const FETCH_USERS_FAILURE = 'FETCH_USERS_FAILURE';
// Action creators
const fetchUsersRequest = () => ({ type: FETCH_USERS_REQUEST });
const fetchUsersSuccess = users => ({ type: FETCH_USERS_SUCCESS, payload:
2024年6月24日 20:01 回复

React-query 就是所谓的专用库。它为你保存了一个 api 缓存——没有别的。由于它是专门的，因此它可以很好地完成这项工作并且需要更少的代码。

react-query 旨在 处理存储在远程服务器上的数据 。要访问此数据，您的应用程序需要使用异步请求。您可能需要在这里处理缓存、加载状态、网络故障等问题。

Redux 这 react-query 是两个非常不同的东西： react-query 用于数据同步， Redux 是全局状态管理器。 react-query 用于将所有应用程序保持同步到同一个数据库， Redux 用于将应用程序状态的一部分共享给需要读取该状态的所有组件。

React Query 管理服务器状态。它的主要功能是处理Server和Client之间的功能。

我们应该区分两种状态， 客户端状态 和 服务器（或远程）状态 ：

React Query 和 Redux 是两个用于在React应用程序中管理状态的库，但它们的关注点和使用场景有一些显著的区别。

jsx
import { useQuery } from 'react-query';
function UsersComponent() {
  const { data, error, isLoading } = useQuery('users', fetchUsers);
  // Render your UI based on the data, error, and loading state...
在这个例子中，fetchUsers是一个异步函数，它向API请求数据。useQuery会自动处理数据的加载、缓存、重载和更新。
而在Redux中，你可能需要创建actions和reducers来处理异步请求，并使用例如redux-thunk的中间件来处理异步逻辑：
jsx




    
import { useDispatch, useSelector } from 'react-redux';
function UsersComponent() {
  const dispatch = useDispatch();
  const { users, error, isLoading } = useSelector(state => state.users);
  useEffect(() => {
    dispatch(fetchUsers());
  }, [dispatch]);
  // Render your UI based on the users, error, and loading state...

React Query 和 Redux 是两种不同类型的库，它们在React应用程序中承担着不同的角色。

javascript
import { useQuery } from 'react-query';
function Users() {
  const { isLoading, error, data } = useQuery('fetchUsers', fetchUsersApi);
  if (isLoading) return 'Loading...';
  if (error) return 'An error has occurred: ' + error.message;
  return (
      {data.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
async function fetchUsersApi() {
  const response = await fetch('/api/users');
  if (!response.ok) {
    throw new Error('Network response was not ok');
  return response.json();
使用Redux处理相同的数据获取，我们需要编写action creators、reducers以及相应的async action handlers：
javascript
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { Provider, useDispatch, useSelector } from 'react-redux';
// Action types
const FETCH_USERS_REQUEST = 'FETCH_USERS_REQUEST';