在这一部分我们将介绍 RTK 查询
1。什么是RTK查询？
虽然 Redux Toolkit 提供了强大的工具来管理状态和异步逻辑，但它仍然需要大量的样板代码来处理数据获取和缓存。 RTK Query，在 Redux Toolkit v1.6 中引入，旨在通过提供一组强大的工具来解决这个问题，以最少的设置实现高效的数据获取和缓存。
RTK 查询的主要功能：
要开始使用 RTK 查询，我们需要定义一个 API 服务，指定如何获取数据以及哪些端点可用。让我们使用简单的帖子 API 创建一个示例。
在 features/posts 目录中创建一个名为 postsApi.js 的新文件。该文件将定义用于获取和修改帖子的 API 端点。
// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
// Define an API service using RTK Query
export const postsApi = createApi({
reducerPath: 'postsApi',
baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
endpoints: (builder) => ({
fetchPosts: builder.query({
query: () => 'posts',
}),
addPost: builder.mutation({
query: (newPost) => ({
url: 'posts',
method: 'POST',
body: newPost,
}),
}),
}),
});
// Export hooks for usage in functional components
export const { useFetchPostsQuery, useAddPostMutation } = postsApi;
说明：
将 postsApi 减速器添加到存储并配置中间件以启用缓存和失效。
更新 store.js 以集成 postsApi:
// src/app/store.js
import { configureStore } from '@reduxjs/toolkit';
import { postsApi } from '../features/posts/postsApi';
const store = configureStore({
reducer: {
// Add the generated reducer as a specific top-level slice
[postsApi.reducerPath]: postsApi.reducer,
},
// Adding the api middleware enables caching, invalidation, polling, and other features of RTK Query
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(postsApi.middleware),
});
export default store;
RTK 查询根据 API 服务中定义的端点生成自定义挂钩。这些钩子用于自动执行数据获取、突变和管理缓存。
创建一个 PostsList.js 组件来获取并显示帖子列表。
// src/features/posts/PostsList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';
const PostsList = () => {
const { data: posts, error, isLoading } = useFetchPostsQuery();
if (isLoading) return <p>Loading...</p>;
if (error) return <p>An error occurred: {error.message}</p>;
return (
<section>
<h2>Posts</h2>
<ul>
{posts.map((post) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</section>
);
};
export default PostsList;
说明：
创建一个 AddPostForm.js 组件以使用 addPost 突变添加新帖子。
// src/features/posts/AddPostForm.js
import React, { useState } from 'react';
import { useAddPostMutation } from './postsApi';
const AddPostForm = () => {
const [addPost, { isLoading }] = useAddPostMutation();
const [title, setTitle] = useState('');
const [content, setContent] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
if (title && content) {
await addPost({ title, body: content }).unwrap();
setTitle('');
setContent('');
}
};
return (
<section>
<h2>Add a New Post</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Post Title"
/>
<textarea
value={content}
onChange={(e) => setContent(e.target.value)}
placeholder="Post Content"
/>
<button type="submit" disabled={isLoading}>
{isLoading ? 'Adding...' : 'Add Post'}
</button>
</form>
</section>
);
};
export default AddPostForm;
说明：
RTK Query 自动处理缓存、错误状态，并在发生突变时使缓存失效。您可以使用标签和其他配置进一步自定义行为。
修改 postsApi 以使用标签进行缓存失效：
// src/features/posts/postsApi.js
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
export const postsApi = createApi({
reducerPath: 'postsApi',
baseQuery: fetchBaseQuery({ baseUrl: 'https://jsonplaceholder.typicode.com/' }),
tagTypes: ['Post'],
endpoints: (builder) => ({
fetchPosts: builder.query({
query: () => 'posts',
providesTags: (result) =>
result ? result.map(({ id }) => ({ type: 'Post', id })) : ['Post'],
}),
addPost: builder.mutation({
query: (newPost) => ({
url: 'posts',
method: 'POST',
body: newPost,
}),
invalidatesTags: ['Post'],
}),
}),
});
export const { useFetchPostsQuery, useAddPostMutation } = postsApi;
说明：
在这一部分中，我们探索了如何使用 RTK 查询来处理 Redux 应用程序中的数据获取和缓存。我们介绍了设置 API 服务、定义端点以及使用生成的挂钩来查询和更改数据。 RTK 查询以最少的代码简化了数据获取和状态管理，使其成为现代 Redux 应用程序的强大工具。
在下一部分中，我们将深入探讨RTK 查询中的高级主题，例如自定义查询、使用 baseQuery、处理身份验证和优化性能。
敬请关注第 4 部分：RTK 查询中的高级主题！
以上是完整的 redux 工具包（部分 -的详细内容。更多信息请关注PHP中文网其他相关文章！
