完整的 redux 工具包（第 4 部分）

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《完整的 redux 工具包（第 4 部分）》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

第 4 部分：rtk 查询中的高级主题。

本部分将重点介绍 rtk 查询中的高级功能和用例，包括自定义查询、处理身份验证、乐观更新和性能优化。

第 4 部分：rtk 查询中的高级主题

1. 高级rtk查询概念介绍

在上一部分中，我们介绍了使用 rtk 查询来获取和变异数据的基础知识。现在，我们将深入研究更高级的功能，使 rtk 查询变得更加强大。这些功能允许您自定义查询、管理身份验证、优化性能并处理乐观更新，以获得更流畅的用户体验。

2. 自定义basequery进行身份验证

使用需要身份验证的 api 时，您需要自定义 basequery 以包含 jwt 令牌或 api 密钥等身份验证标头。

第 1 步：创建自定义基本查询

您可以创建一个自定义的 basequery 函数，为每个请求添加授权标头。

// src/app/custombasequery.js
import { fetchbasequery } from '@reduxjs/toolkit/query/react';

const custombasequery = fetchbasequery({
  baseurl: 'https://jsonplaceholder.typicode.com/',
  prepareheaders: (headers, { getstate }) => {
    const token = getstate().auth.token; // assuming auth slice has token
    if (token) {
      headers.set('authorization', `bearer ${token}`);
    }
    return headers;
  },
});

export default custombasequery;

说明：

• prepareheaders：此函数允许您为每个请求自定义标头。它从 redux 存储中检索令牌并将其附加到 authorization 标头。

第2步：在createapi中使用自定义basequery

修改 postsapi.js 文件以使用自定义基本查询：

// src/features/posts/postsapi.js
import { createapi } from '@reduxjs/toolkit/query/react';
import custombasequery from '../../app/custombasequery';

export const postsapi = createapi({
  reducerpath: 'postsapi',
  basequery: custombasequery, // use the custom base query here
  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;

3. 使用 rtk 查询进行乐观更新

乐观更新允许您在服务器确认突变之前立即更新 ui，提供更流畅的用户体验。如果服务器返回错误，ui 可以恢复到之前的状态。

第 1 步：在突变中实施乐观更新

您可以使用 rtk query 提供的 onquerystarted 生命周期方法来实现乐观更新。

// src/features/posts/postsapi.js
addpost: builder.mutation({
  query: (newpost) => ({
    url: 'posts',
    method: 'post',
    body: newpost,
  }),
  invalidatestags: ['post'],
  onquerystarted: async (newpost, { dispatch, queryfulfilled }) => {
    // optimistic update: immediately add the new post to the cache
    const patchresult = dispatch(
      postsapi.util.updatequerydata('fetchposts', undefined, (draftposts) => {
        draftposts.push({ id: date.now(), ...newpost }); // fake id for optimistic update
      })
    );
    try {
      await queryfulfilled; // await server response
    } catch {
      patchresult.undo(); // revert if the mutation fails
    }
  },
}),

说明：

• onquerystarted：当突变开始时会触发此生命周期方法。它提供了dispatch和queryfulfilled参数来管理缓存更新。
• postsapi.util.updatequerydata：这个实用函数允许您乐观地更新缓存数据。
• patchresult.undo()：如果服务器返回错误，则恢复乐观更新。

4. 处理相关查询

有时，您可能需要执行相关查询，其中一个查询依赖于另一个查询的结果。 rtk 查询提供了skip 参数来控制查询何时执行。

示例：根据所选帖子 id 获取帖子详细信息

// src/features/posts/postdetails.js
import react from 'react';
import { usefetchpostquery } from './postsapi';

const postdetails = ({ postid }) => {
  const { data: post, error, isloading } = usefetchpostquery(postid, { skip: !postid });

  if (!postid) return <p>select a post to view details.</p>;
  if (isloading) return <p>loading...</p>;
  if (error) return <p>error loading post details.</p>;

  return (
    <div>
      <h3>{post.title}</h3>
      <p>{post.body}</p>
    </div>
  );
};

export default postdetails;

说明：

• usefetchpostquery：以 postid 作为参数的查询挂钩。如果未提供 postid，则使用 {skip: !postid } 跳过查询。

5. 使用 rtk 查询轮询和实时数据

rtk 查询支持轮询，以指定的时间间隔保持数据最新。这对于实时数据同步很有用。

第 1 步：在查询中使用轮询

您可以使用 pollinginterval 选项为任何查询启用轮询。

// src/features/posts/postslist.js
import react from 'react';
import { usefetchpostsquery } from './postsapi';

const postslist = () => {
  const { data: posts, error, isloading } = usefetchpostsquery(undefined, {
    pollinginterval: 30000, // poll every 30 seconds
  });

  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;

说明：

• pollinginterval：此选项指定查询应轮询服务器以获取新数据的时间间隔（以毫秒为单位）。

6. 使用 selectfromresult 优化性能

rtk 查询提供 selectfromresult 选项以实现高级性能优化，允许您从查询结果中选择特定数据。

第 1 步：使用 selectfromresult 优化重新渲染

当只需要查询结果的子集时，可以使用 selectfromresult 选项来防止不必要的重新渲染。

// src/features/posts/PostTitleList.js
import React from 'react';
import { useFetchPostsQuery } from './postsApi';

const PostTitleList = () => {
  const { data: posts } = useFetchPostsQuery(undefined, {
    selectFromResult: ({ data }) => ({ titles: data?.map((post) => post.title) }),
  });

  return (
    <section>
      <h2>Post Titles</h2>
      <ul>
        {posts?.map((title, index) => (
          <li key={index}>{title}</li>
        ))}
      </ul>
    </section>
  );
};

export default PostTitleList;

说明：

• selectfromresult：此选项允许您仅从获取的帖子中选择标题，防止查询结果中的其他数据发生更改时不必要的重新渲染。

7. 结论和后续步骤

在这一部分中，我们探讨了 rtk 查询中的高级主题，例如自定义用于身份验证的 basequery、处理乐观更新、管理依赖查询、使用轮询进行实时数据同步以及使用 selectfromresult 优化性能。 rtk query 丰富的功能集使其成为现代 redux 应用程序中处理数据获取和缓存的强大工具。

在下一部分中，我们将讨论redux toolkit 和 rtk 查询的测试策略，涵盖单元测试、集成测试以及确保代码健壮和可维护的最佳实践。

敬请关注第 5 部分：redux 工具包和 rtk 查询的测试策略！

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《完整的 redux 工具包（第 4 部分）》文章吧，也可关注golang学习网公众号了解相关技术文章。