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

React Query和Redux是两种在React应用中处理状态管理的解决方案。它们在设计和使用上有着一些主要区别。本文将介绍React Query和Redux的主要区别，并通过一个案例代码来说明它们的不同之处。

javascript
// React Query示例代码
import { useQuery } from 'react-query';
function App() {
  const { data, error, isLoading } = useQuery('todos', () =>
    fetch('https://api.example.com/todos').then((res) => res.json())
  );
  if (isLoading) {
    return 
Loading...
;
  }
  if (error) {
    return 
Error: {error.message}
;
  }
  return (
    
      {data.map((todo) => (
        
{todo.title}
      ))}
    
  );
}
// Redux示例代码
import { connect } from 'react-redux';
import { fetchTodos } from './actions';
class App extends React.Component {
  componentDidMount() {
    this.props.fetchTodos();
  }
  render() {
    const { todos, isLoading, error } = this.props;
    if (isLoading) {
      return 
Loading...
;
    }
    if (error) {
      return 
Error: {error.message}
;
    }
    return (
      
        {todos.map((todo) => (
          
{todo.title}
        ))}
      
    );
  }
}
const mapStateToProps = (state) => ({
  todos: state.todos,
  isLoading: state.isLoading,
  error: state.error,
});
const mapDispatchToProps = {
  fetchTodos,
};
export default connect(mapStateToProps, mapDispatchToProps)(App);