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

定义数据请求方法

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

// 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({
        query(coin) {
          return "/trading/getCurrEstimate" + (coin ? `?coin=${coin}` : "");
        },
      }),
    };
  },
});

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

数据集成到 store 中管理

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

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

使用数据

import { useFetchSummaryQuery } from "../api/api-slice";

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

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

参考资料

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