## redux tookit - rtk query

官网：[https://redux-toolkit.js.org/rtk-query/overview]()

> `rtk query` 是 `@reduxjs/toolkit` 包中的的一个可选插件，其体系结构在内部使用redux。`rtk query` 是一个强大的数据获取和缓存工具，**RTK Query** 是一个强大的数据获取和缓存工具。它旨在简化在 Web 应用程序中加载数据的常见情况，**无需自己手动编写数据获取和缓存逻辑**。极大简化代码。

#### RTK Query 包含以下API:

* createApi
  > RTK query功能的核心。允许定义一组endpoints来描述如何从一系列endpoints检索数据，包括如何获取和转换该数据的配置。经验法则：每个基本URL使用一个API slice。
  >
* fetchbasQuery
  > fetch 的一个小包装，旨在简化请求。
  >
* > 可以作为 Provider 使用如果你还没有redux store
  >
* setupListeners
  > 用于启用 refetchOnMount 和 refetchOnReconconnect 行为的实用程序
  >

接下来我将介绍一下该工具的简单使用

#### 引用 `（可通过以下两种方式获得）`

```ts
import { createApi } from '@reduxjs/toolkit/query'

/* React-specific entry point that automatically generates
   hooks corresponding to the defined endpoints */
import { createApi } from '@reduxjs/toolkit/query/react'
```

#### 定义API slice

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Pokemon } from './types'

// Define a service using a base URL and expected endpoints
export const pokemonApi = createApi({
// 作为唯一key挂载到store
  reducerPath: 'rootApi', 
// 所有请求都以 https://fakeApi 这个开头
  baseQuery: fetchBaseQuery({ baseUrl: 'https://fakeApi' }), 
// 代表对该服务器的操作和请求
  endpoints: (builder) => ({
// builder.query<resType, reqParamType>， build.query 一般用于 GET 请求
// builder.mutation一般用于会改变数据库数据请求 比如POST请求
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
    updatePokemon: builder.mutation<void, Pokemon>({
      query: ({id, ...pathch}) => {
        url: `pokemon/${name}`,
        method: 'POST',
        body: patch
        },
    }),
  }),
})

// 为 `getPokemonByName` Query endpoint 导出自动生成的 hooks
export const { useGetPokemonByNameQuery, useUpdatePokemonMutation } = pokemonApi
```

我一般会拆分开来使用，因为项目中接口请求不止一个，可以把定义API slice 放在一个文件，请求可以通过 `injectEndpoints` 把需要的请求放入。

roote-api.ts

```ts
import {createApi, fetchBaseQuery} from '@reduxjs/toolkit/query/react';

// Define a service using a base URL and expected endpoints
const rootApi = createApi({
  // 作为唯一key挂载到store
  reducerPath: 'rootApi',
  // 所有请求都以 https://fakeApi 这个开头
  baseQuery: fetchBaseQuery({ baseUrl: 'https://fakeApi' }), 
  // 代表对该服务器的操作和请求
  endpoints: () => ({}),
});

export default rootApi;
```

features/api/pokemon-api.js

```ts
import rootApi from '@/store/root-api';

const pokemonApi = rootApi.injectEndpoints({
  endpoints: builder => ({
    // builder.query<resType, reqParamType>， build.query 一般用于 GET 请求
    // builder.mutation一般用于会改变数据库数据请求 比如POST请求
    getPokemonByName: builder.query<Pokemon, string>({
      query: (name) => `pokemon/${name}`,
    }),
    updatePokemon: builder.mutation<void, Pokemon>({
      query: ({id, ...pathch}) => {
        url: `pokemon/${name}`,
        method: 'POST',
        body: patch
        },
    }),
  }),
});

export const { useGetPokemonByNameQuery, useUpdatePokemonMutation } = pokemonApi
```

#### 配置store

> API slice 还包含一个自动生成的Redux slice reducer （rootApi.reducer） 和一个自定义中间件（rootApi.middleware），这里的rootApi是我上面定义的 API slice

store.js

```ts
import postsReducer from '../features/posts/postsSlice'
import usersReducer from '../features/users/usersSlice'
import notificationsReducer from '../features/notifications/notificationsSlice'
import { apiSlice } from '../features/api/apiSlice'

export default configureStore({
  reducer: {
    posts: postsReducer,
    users: usersReducer,
    notifications: notificationsReducer,
    [routApiSlice.reducerPath]: rootApi.reducer
  },
  middleware: getDefaultMiddleware =>
    getDefaultMiddleware().concat(rootApi.middleware)
})
```

#### 在组件中使用hooks

每个生成的query hooks 都会返回一个包含多个字段的对象，包括：

* data： 来自服务器的实际响应内容，收到响应之前，该字段将是 `undefined`
* isLoading: boolean类型, 代笔此hooks当前是否正在向服务器发出**第一次**请求。（注意：如果参数更改以请求不同的数据，isLoading将保持为false)
* isFetching: boolean类型，此hooks当前是否正在向服务器发出任何请求。
* isSuccess: boolean类型, 此hooks 是否已成功请求并有可用的缓存数据
* isError: boolean类型, 指最后一个请求是否有错误
* error: 一个 serialized 错误对象

```tsx
import * as React from 'react'
import { useGetPokemonByNameQuery, useUpdatePokemonMutation } from './features/api/pokemon-api'

export default function App() {
  // Using a query hook automatically fetches data and returns query values
  const { data, error, isLoading } = useGetPokemonByNameQuery('bulbasaur')
  // Individual hooks are also accessible under the generated endpoints:
  // const { data, error, isLoading } = pokemonApi.endpoints.getPokemonByName.useQuery('bulbasaur')
  const [trigger, { data, error, isLoading }] = useUpdatePokemonMutation()

  const updatePokenmon = (data) => {
    trigger(data);
  }

  // render UI based on data and loading state
}
```


`rtk query` 是 `@reduxjs/toolkit` 包中的的一个可选插件，其体系结构在内部使用redux。`rtk query` 是一个强大的数据获取和缓存工具，**RTK Query** 是一个强大的数据获取和缓存工具。它旨在简化在 Web 应用程序中加载数据的常见情况，**无需自己手动编写数据获取和缓存逻辑**。极大简化代码。

redux tookit - rtk query的简单使用

## RTK Query 清除缓存

> 使用RTK Query的应该知道它有自己的一套缓存策略
>
> RTK Query 的一个关键特性是它对缓存数据的管理。当从服务器获取数据时，RTK Query 将在 Redux 存储中以“缓存”的形式存储数据。当对相同数据执行附加请求时，RTK Query 将提供现有的缓存数据，而不是向服务器发送附加请求。

下面提供一些清除缓存的方法

#### refetchOnMountOrArgChange

接受布尔值或数字作为时间（以秒为单位）

* 传false（默认是false），将会根据缓存策略进行缓存
* 传 true， 当组件挂载或者参数更改时，会重新获取数据
* 传递number时：如果缓存中存在现有查询，它将比较当前时间与该查询最后完成的时间，如果提供的时间过去了，将重新获取，如果没有过去，将提供现有的缓存数据

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Post } from './types'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  refetchOnMountOrArgChange: 30,
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], number>({
      query: () => `posts`,
    }),
  }),
})
```

```tsx
import { useGetPostsQuery } from './api'

const Component = () => {
  const { data } = useGetPostsQuery(
    { count: 5 },
    // this overrules the api definition setting,
    // forcing the query to always fetch when this component is mounted
    { refetchOnMountOrArgChange: true }
  )

  return <div>...</div>
}
```

#### 使用 cache tag

> 这个也是比较常用到的一个清除缓存的方法
>
> 我们经常会比如在创建某个item时 需要更新列表数据 这个时候就可以用到 cache tag了

主要做两件事

* 给需要清除缓存的query API提供tag
* 在对应mutation接口请求成功后失效tag

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query'
import type { Post, User } from './types'

const api = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: '/',
  }),
  tagTypes: ['Post', 'User'],
  endpoints: (build) => ({
    getPosts: build.query<Post[], void>({
      query: () => '/posts',
      providesTags: (result, error, arg) =>
        result
          ? [...result.map(({ id }) => ({ type: 'Post' as const, id })), 'Post']
          : ['Post'],
    }),
    getUsers: build.query<User[], void>({
      query: () => '/users',
      providesTags: ['User'],
    }),
    addPost: build.mutation<Post, Omit<Post, 'id'>>({
      query: (body) => ({
        url: 'post',
        method: 'POST',
        body,
      }),
      // 总是使与全局 tag 'Post' 相关的缓存失效 无法针对具体的 Post 进行精确的缓存失效。
      invalidatesTags: ['Post'],
    }),
    editPost: build.mutation<Post, Partial<Post> & Pick<Post, 'id'>>({
      query: (body) => ({
        url: `post/${body.id}`,
        method: 'POST',
        body,
      }),
      // 能够根据 mutation 的执行结果动态生成与 Post 相关的 tag，并使这些 tag 失效， 更加灵活和精确
      invalidatesTags: (result, error, arg) => [{ type: 'Post', id: arg.id }],
    }),
  }),
})
```

#### refetchOnFocus

> 控制RTK 查询在应用程序窗口重新获得焦点后是否尝试重新获取所有订阅的查询
>
> 如果在 skip: true 旁边指定此选项，则直到 skip 为 false 时才计算此值。

```ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
import type { Post } from './types'

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/' }),
  // global configuration for the api
  refetchOnReconnect: true,
  endpoints: (builder) => ({
    getPosts: builder.query<Post[], number>({
      query: () => `posts`,
    }),
  }),
})
```

```ts
import { configureStore } from '@reduxjs/toolkit'
import { setupListeners } from '@reduxjs/toolkit/query'
import { api } from './services/api'

export const store = configureStore({
  reducer: {
    [api.reducerPath]: api.reducer,
  },
  middleware: (gDM) => gDM().concat(api.middleware),
})

// enable listener behavior for the store
setupListeners(store.dispatch)

export type RootState = ReturnType<typeof store.getState>
```

#### refetchOnReconnect

> 控制 RTK Query 在重新获得网络连接之后是否尝试重新获取所有订阅的查询
>
> 用法及注意事项与上相同


使用RTK Query的应该知道它有自己的一套缓存策略

RTK Query 的一个关键特性是它对缓存数据的管理。当从服务器获取数据时，RTK Query 将在 Redux 存储中以“缓存”的形式存储数据。当对相同数据执行附加请求时，RTK Query 将提供现有的缓存数据，而不是向服务器发送附加请求。

Redux Tookit 通关手册

教程简介

文章列表

redux tookit - rtk query的简单使用

RTK Query 清除缓存