React redux toolkit query RTKQ

Question

RTK Query 是一个强大的数据获取和缓存工具，在它的帮助下，web 应用的加载变得十分简单，它使我们不再需要自己编写数据获取和缓存数据的逻辑。

创建 Api 切片

RTKQ 中将一组相关功能统一封装到一个 api 对象中。

store/studentApi.js 文件

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

// createApi() 用来创建 RTKQ 中的 API 对象
// RTKQ 的所有功能都需要通过该对象来进行
const studentApi = createApi({
  reducerPath: 'studentApi', //Api 的标识，不能和其他 Api 或 reducer 重复
  baseQuery: featchBaseQuery({baseUrl: "http://localhost:1337/api/"}), // 指定查询的基础信息
  // endpoints 用来指定 Api 中的各种功能，是一个方法，需要一个对象作为返回值。
  tagTypes: ['student'], // 用来指定 Api 中的标签类型
  endpoints(build){
    // build 是请求的构建器，通过 build 来设置请求的相关信息
    return {
      getStudents: build.query({
        query(){
          // 用来设置请求子路径
          return 'students';
        },
        // transformResponse 用来转换响应数据格式
        transformResponse(baseQueryReturnValue){
          return baseQueryReturnValue.data;
        },
        providesTags: ['student'], // 被调者
      }),
      getStudentById: build.query({
        query(id){
          return `students/${id}`;
        },
        // transformResponse 用来转换响应数据格式
        transformResponse(baseQueryReturnValue){
          return baseQueryReturnValue.data;
        },
        keepUnusedDataFor: 0, // 设置数据缓存的时间，单位（秒)。默认是 60 秒
        providesTags: (result, error, id) => {
          return [{
          type: 'student',
          id,
        }]
        }
      }),
      delStudent: build.mutation({
        query(id){
          return {
            url: `students/${id}`,
            method: 'delete'
          }
        }
      }),
      updateStudent: build.mutation({
        query(stu){
          return {
            url: `students/${stu.id}`,
            method: 'put',
            body: {
              data: stu.data
            }
          }
        },
        invalidatesTags: (result, error, stu) => {
          return [{ type: 'student', id: stu.id }], // 调用者
        }
      })
    }
  }
})

// Api 对象创建后，对象中会根据各种方法自动生成对应的钩子函数
// 通过这些钩子函数，可以向服务器发送请求
// 钩子函数命名规则：getStudents --> useGetStudentsQuery
const { useGetStudentsQuery } = studentApi;
export default studentApi;

创建 store 对象

Api 对象的使用有两种方式：一种是直接使用，一种是作为 store 中的一个 reducer 使用。

store/index.js 文件

import { configureStore } from '@reduxjs/toolkit';
import { studentApi } from './studentApi';

export const store = configureStore({
  reducer: {
    [studentApi.reducerPath]: studentApi.reducer
  },
  // 中间件用来处理 Api 的缓存
  middleware: getDefaultMiddleware => {
    // 把 Api 中生成的中间件配置进默认中间件中去
    return getDefaultMiddleware().concat(studentApi.middleware);
  };
})

使用

App.js

import { useGetStudentsQuery, useGetStudentByIdQuery, useDelStudentMutation, useUpdateStudentMutation } from 'store/studentApi';
const App = (props) => {
  // 调用 Api 中的钩子查询数据
  // 这个钩子函数返回一个对象作为返回值，请求过程中的相关数据都存储在该对象中
  const { data, isSuccess, isLoading } = useGetStudentsQuery();
  const { data, isSuccess, isLoading } = useGetStudentByIdQuery(props.id); // 更具 id 获取数据
  const { data, isSuccess, isLoading } = useGetStudentByIdQuery(props.id, {
    // useQuery 还可以接受一个对象作为第二个参数，通过该对象可以对请求进行配置。
    selectFromResult: result => result, // 用来指定 useQuery 的返回结果
    pollingInterval: 0, // 设置轮询的间隔，单位 ms,为 0 则不轮询
    skip: !props.id, // 设置是否跳过当前请求，默认 false

    // 一、值为 boolean, 表示设置是否每一次都重新加载数据。false:正常使用缓存，true:每次重载数据。
    // 二、值为 number，表示数据缓存（有效期) 的时间，单位（秒)
    refetchOnMountOrArgChange: false, 
    refetchOnFocus: false, // 设置是否在页面重新获取焦点时请求数据
    refetchOnReconnect: true, // 设置是否在网络重连后请求数据
  });

  // useMutation 钩子返回的是一个数组：[操作的触发器，请求返回的结果集]
  const { delStudent, result } = useDelStudentMutation();
  const { updateStudent, result } = useUpdateStudentMutation()
  const handler = () => {
    delStudent(props.id);
    updateStudent({
      id: xx,
      data: xxx
    })
  }
  return (
      <div>
      { isLoading && <p>数据加载中...</p> }
      { isSuccess && data.data.map(item => <p key={item.id}>...</p>) }
    </div>
  )
}
export default App;

// 更新后