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

Question

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

export const WebApi = create Api({
reducerPath: 'API',
baseQuery: fetchBaseQuery({ base Url: '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

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

Answer 2

所以，答案是：

就在您创建的文件中 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，因为我的配置已经在里面了。但是你可以在这里做一个async await fetch，从任何地方获取数据

这个常量 dynamicBaseQuery 插入到您的 crateApi 中的 baseQuery 键中

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

});

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

How to dynamicly chane base URL using redux-toolkit?

redux-toolkit

rtk-query