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

Posted 2023-03-28

【中文标题】如何使用 redux-toolkit 动态更改基本 URL？

【英文标题】：How to dynamicly chane base URL using redux-toolkit?

【发布时间】：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？

【参考方案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: () => (),

);