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

Question

我使用redux工具包创建了一个应用程序接口，问题很简单:如何动态更改应用程序接口中的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

所以，答案是：

就在您创建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: () => ({}),

});

Answer 2

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