快速添加 Redux 接口 API 请求到 Ts APP

定义数据请求方法

src/features/api/apiSlice.ts

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

import type { Estimate } from "./types";

// API 接口数据请求封装
export const apiSlice = createApi({
  // 数据仓库 namespace
  reducerPath: "api",
  // API 服务基础信息: URL, Header, 授权 ... => 服务需要支持跨域
  baseQuery: fetchBaseQuery({
    baseUrl: "http://localhost:3001",
    prepareHeaders(headers) {
      headers.set("k", "v");
      return headers;
    },
  }),
  // 接口请求方法封装
  endpoints(builder) {
    return {
      // 请求 API 方法
      fetchSummary: builder.query<Estimate, string>({
        query(coin) {
          return "/trading/getCurrEstimate" + (coin ? `?coin=${coin}` : "");
        },
        transformResponse: (rawResult: { code: number; msg: string; data: TotalAsset }, meta) => {
          return rawResult.data;
        },
      },
      }),
    };
  },
});

// 这里的方法是通过 Endpoint 中的方法自动封装得到的
export const { useFetchSummaryQuery } = apiSlice;

数据集成到 store 中管理

src/store.ts

import { configureStore, getDefaultMiddleware } from "@reduxjs/toolkit";
import { apiSlice } from "./features/api/apiSlice";

export default configureStore({
  reducer: {
    [apiSlice.reducerPath]: apiSlice.reducer,
  },
  middleware: (getDefaultMiddleware) => {
    return getDefaultMiddleware().concat(apiSlice.middleware);
  },
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
export type AppDispatch = typeof store.dispatch;

使用数据

import { useFetchSummaryQuery } from "../api/apiSlice";

// under render function
const { data, isFetching } = useFetchSummaryQuery();

经过此方法进行 store 管理的 api 数据, 会缓存一段时间, 频繁切换界面不会造成数据往复请求.

参考资料

• Learn With Jason
• Mark Erikson
• Redux Toolkit
• Express Cors