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

【问题标题】：How to dynamicly chane base URL using redux-toolkit?如何使用 redux-toolkit 动态更改基本 URL？
【发布时间】：2021-12-02 17:16:20
【问题描述】：

我使用 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？

【问题讨论】：

标签： redux-toolkit rtk-query

【解决方案1】：

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

【讨论】：

否，api 与 origin 不同
?我的意思是例子在哪里const adjustedUrl = `project/${projectId}/${urlEnd}` 你也可以只做const adjustedUrl = `https://${somethingYouGotFromTheStore}/${urlEnd}`

【解决方案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，因为我的配置已经在其中。但是您可以在这里进行异步等待获取，以从任何地方获取数据

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

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

});

【讨论】：