redux-toolkit 在 react 中的用法（续）

niuiic

已于 2022-03-16 11:41:02 修改

阅读量3.5k

点赞数 2

分类专栏： react 文章标签： react.js redux-toolkit rtk-query axios

于 2022-02-26 14:37:50 首次发布

本文链接：https://blog.csdn.net/niuiic/article/details/123149734

版权

本文详细介绍了如何在React中使用redux-toolkit的rtk-query模块进行网络请求，包括基础API配置、事件触发请求、中间件（日志和错误处理）、数据持久化及简化版请求的实现。rtk-query提供了高级的请求管理功能，如自动缓存和轮询。文中探讨了如何处理请求触发的场景，如在按钮点击事件中发起请求，并展示了如何自定义中间件进行日志记录和错误处理。此外，还展示了如何利用localStorage实现数据持久化，并提到了简化版请求的替代方案。

摘要由CSDN通过智能技术生成

更多分享内容可访问我的个人博客

https://www.niuiic.top/

rtk-query

rtk-query 是进行网络请求的一个高级工具，下面介绍一下使用流程。

首先是新建一个基础 api。

// apis/base.ts

import {
    createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const baseApi = createApi({
   
  // 根据url自动选择http或者https协议
  // 如果是移动端应用，由于模拟器中的网络与本地不一致，即使服务器在本地也不能使用127.0.0.1，必须用局域网地址
  baseQuery: fetchBaseQuery({
    baseUrl: "http://192.168.31.228:8000/v1/" }), // 发送请求的目的地址的前半部分
  reducerPath: "baseApi", // 告诉redux-toolkit我们想把从这个api获取的数据放到store的什么位置
  endpoints: () => ({
   }), // endpoints中放的是各种请求相关的函数，这里暂时为空，后续写具体的Api时再补充。
});

如果你没有现成的服务端程序，可以在 https://pokeapi.co/ 进行测试。

然后是写一个具体的 api，填充 endpoints。

// apis/user.ts

import {
    baseApi } from "../base";

// 请求返回值的类型
// 这里不需要严格对应，举个例子
// 假设真实返回值的类型比下面还多个time字段，或者说并没有data字段，下面定义的类型也是不会报错的
// 甚至返回的是一个json文件，且定义的返回值类型为string也是可以的，最终可以通过`.`操作符获取其中的字段
interface User {
   
  data: string;
}

// 在baseApi的基础上创建userApi
const userApi = baseApi.injectEndpoints({
   
  endpoints: (builder) => ({
   
    // 根据id去查询
    // query用于检索数据，并可以向缓存提供标签
    // 第一个参数是返回值的类型，第二个参数是传递给后端的数据类型（这里传递的是id，为number类型）
    getUserById: builder.query<User, number>({
   
      // 这里参数的类型必须和上面定义的一致
      query: (id: number) => ({
   
        // 请求地址的后半部分
        url: `/user/${
     id}`,
        // 请求的方法
        method: "get",
      }),
    }),
    // 根据id删除用户
    // 对于改变服务器上的数据或可能会使缓存无效的任何内容应当使用mutation
    deleteUserById: builder.mutation({
   
      query: (id: number) => ({
   
        url: `/user/${
     id}`,
        method: "delete",
      }),
    }),
  }),
  overrideExisting: false,
});

// 导出可在函数式组件使用的hooks，它是基于定义的endpoints自动生成的
// 这个的名称是固定的，就是use加上前面定义的名字再加上query或者mutation
export const {
    useGetUserByIdQuery, useDeleteUserByIdMutation } = userApi;

然后就是将定义好的 api 与 store 联系起来。

// stores/Welcome.ts

import {
    configureStore } from "@reduxjs/toolkit";
import loginReducer from "../components/welcome/LoginRedux";
import {
    baseApi } from "../apis/base";
import {
    setupListeners } from "@reduxjs/toolkit/dist/query";

// 中间件集合
const middlewareHandler = (getDefaultMiddleware: any) => {
   
  const middlewareList = [...getDefaultMiddleware()];
  // 把api自动生成的中间件加进去
  middlewareList.push(baseApi.middleware);
  return middlewareList;
};

export const welcomeStore = configureStore({
   
  reducer: {
   
    // login是Welcome页面的一个模块
    login: loginReducer,
    // 把api自动生成的reducer加进入
    [baseApi.reducerPath]: baseApi.reducer,
  },
  middleware: (getDefaultMiddleware) => middlewareHandler(getDefaultMiddleware),
});

// 这里主要是监听焦点、网络通断、组件可视性变化和其他一些事件，如果没有这些情况，就不需要监听
setupListeners(welcomeStore.dispatch);

export <