在这一部分我们将介绍 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中文网其他相关文章!