如何使用 redux-toolkit 动态更改基本 URL？

Question

我使用 redux 工具包创建 API 问题很短：如何动态更改 API 中的 baseUrl？详细问题：这里是 createApi 方法 一个对象被传递给这个方法，其中一个键是“baseQuery”

export const WebApi = createApi({
    reducerPath: 'API',
    baseQuery: fetchBaseQuery({ baseUrl: 'http://localhost:3001/api' }),
    endpoints: () => ({}),
});

那么问题来了，如何动态改变baseUrl呢？它在商店里，但我不能把它放在这里。我尝试了自定义查询文档中的解决方案 https://redux-toolkit.js.org/rtk-query/usage/customizing-queries#constructing-a-dynamic-base-url-using-redux-state

但它不允许精确更改baseUrl，只能动态处理请求本身，该请求已经在baseUrl之后

那么，如何在createApi方法中获取和更改baseUrl呢？

Answer 1

所以，答案是：

就在您创建 api 的文件中，过去的代码如下：

const dynamicBaseQuery: BaseQueryFn<string | FetchArgs,
  unknown,
  FetchBaseQueryError> = async (args, WebApi, extraOptions) => {
  const baseUrl = (WebApi.getState() as any).configuration.baseUrl;
  const rawBaseQuery = fetchBaseQuery({ baseUrl });
  return rawBaseQuery(args, WebApi, extraOptions);
};

我从商店使用baseUrl，因为我的配置已经在里面了。但是您可以在此处进行异步等待获取，以从任何地方获取数据

并将这个常量dynamicBaseQuery插入到baseQuery您的 key 中createApi

export const WebApi = createApi({
  reducerPath: 'API',
  baseQuery: dynamicBaseQuery,
  endpoints: () => ({}),
});

Answer 2

如果您传入完整的 url（以http://或开头https://），fetchBaseQuery将跳过baseUrl并使用提供的 url。因此，您可以使用上面链接的逻辑将当前的 baseUrl 添加到url查询的前面。