访问RTKQuery中并行查询/变异的状态

通过使用RTK Query中的useQuery和useMutation hook，可以访问并行查询和变异的状态信息。这些hooks都有一个返回值包含查询或变异的加载状态、数据和错误信息等。此外，还可以使用范型和选项对象来配置查询或变异hook，以满足特定需求。以下是一个查询hook的示例代码：

import { useQuery } from '@reduxjs/toolkit/query/react';
import { api } from './api';

interface Todo {
  id: number;
  title: string;
  completed: boolean;
}

interface TodoQueryParams {
  userId?: number;
}

export const useFetchTodos = (params?: TodoQueryParams) => {
  return useQuery<Todo[], Error>({
    queryKey: ['todos', params],
    queryFn: () => api.fetchTodos(params),
  });
};

使用上述代码，可以通过调用useFetchTodos()来访问并行查询的状态。例如，可以在React组件中这样使用：

function TodoList({ userId }: { userId?: number }) {
  const { data, isLoading, error } = useFetchTodos({ userId });

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data?.map(todo => (
        <li key={todo.id}>
          <input type="checkbox" checked={todo.completed} />
          {todo.title}
        </li>
      ))}
    </ul>
  );
}

在上述示例中，调用useFetchTodos()返回一个包含data、isLoading和error属性的对象，分别表示查询加载的数据、加载状态和错误信息。根据这些状态信息，可以动态地展示UI，以便用户获得更好的体验。通过这种方式，RTK Query可以轻松地管理和访问并行查询/变异的状态信息。