设计共享的 redux createApi 库答案

【问题标题】：design shared redux createApi library设计共享的 redux createApi 库
【发布时间】：2022-06-12 03:56:53
【问题描述】：

我有一个包含 4 个不同项目的 monorepo，这些项目重新使用了类似的 redux 工具包逻辑，并希望将所有内容都放在一个共享库中以停止重复代码。是否有最佳实践来做到这一点？我的问题是 createApi 需要访问我在各个项目中定义的 RootState，因此我无法从 API 访问它（它会创建循环依赖项）。

目前，我在每个项目中都有一个基本 API 文件，我会为此覆盖端点：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { siteConfig } from '../config/site.config';
import { RootState } from '../context/store';

export const baseApi = createApi({
  reducerPath: 'myApiProject1',
  tagTypes: ['TypeA', 'TypeB', 'TypeC'],
  baseQuery: fetchBaseQuery({
    baseUrl: siteConfig.apiUrl,
    prepareHeaders: (headers, { getState }) => {
      const state = getState() as RootState;
      const token = state.Auth.tokens?.token;
      if (token) {
        headers.set('authorization', `Bearer ${token}`);
      }
      return headers;
    },
  }),
  endpoints: (builder) => ({}),
});

然后我有多个文件来配置端点（以下是我的 /training 端点）：

import queryString from 'query-string';
import { myBaseApi } from './base-api-slice';

const trainingApi = myBaseApi.injectEndpoints({
  endpoints: (builder) => ({
    getExercises: builder.query<PaginatedResult<Exercise>, FindExerciseDto>({
      query: (findDto) => {
        const urlParams = queryString.stringify(findDto);
        console.debug(`getExercises params`, urlParams);
        return `Training?${urlParams}`;
      }, 
    }),
//...
export const {
  useGetExercisesQuery
} = trainingApi;

如何在无需访问商店的情况下将端点外部化？

谢谢

【问题讨论】：

标签： api shared-libraries redux-toolkit

【解决方案1】：

你能想出办法吗？我正在寻找类似的东西

【讨论】：