使用RTK-query Redux获取数据

使用 RTK - Query（Redux Toolkit 的一部分）获取数据主要涉及以下步骤：

一、创建 API 服务

1. 安装依赖
   • 确保已经安装了 @reduxjs/toolkit 和 react - redux。
2. 定义 API 钩子
   • 在项目中创建一个文件（例如 api.js），使用 createApi 函数来定义 API 相关的操作。
   • 例如，要获取用户数据：

   import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'; export const api = createApi({ reducerPath: 'api', baseQuery: fetchBaseQuery({ baseUrl: 'https://your - api - domain.com' }), endpoints: (builder) => ({ getUser: builder.query({ query: (userId) => `/users/${userId}`, }), }), }); export const { useGetUserQuery } = api;

二、在 Redux Store 中注册 API 服务

1. 创建 Store
   • 在创建 Redux store 时，将 API 服务包含进去。

   import { configureStore } from '@reduxjs/toolkit'; import { api } from './api'; const store = configureStore({ reducer: { [api.reducerPath]: api.reducer, }, middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(api.middleware), }); export default store;

三、在组件中使用查询数据

1. 导入查询钩子
   • 在需要获取数据的 React 组件中，导入之前定义好的查询钩子（如 useGetUserQuery）。
2. 调用查询钩子
   • 例如：

   import React from 'react'; import { useGetUserQuery } from './api'; const UserProfile = ({ userId }) => { const { data, isLoading, isError } = useGetUserQuery(userId); if (isLoading) { return <div>Loading...</div>; } if (isError) { return <div>Error loading user data</div>; } return ( <div> <h1>{data.name}</h1> <p>{data.email}</p> </div> ); }; export default UserProfile;

RTK - Query 还有很多高级特性，比如缓存管理、自动重新获取数据（例如在相关参数变化时）、请求的并发控制等。它简化了 Redux 中的数据获取和管理流程，减少了样板代码。