如何使用redux-toolkit动态修改API的baseUrl？

实现方案 #

你可以通过自定义封装fetchBaseQuery的方式实现动态读取store值修改baseUrl，具体代码如下：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

// 自定义动态baseQuery，每次请求都会拉取store最新的baseUrl
const dynamicBaseQuery = async (args, api, extraOptions) => {
  // 从store中读取存储的baseUrl，此处路径替换为你实际的state取值路径
  const storeBaseUrl = api.getState().你的slice名称.baseUrl
  // 用动态获取的baseUrl创建请求实例，兜底默认值可自行修改
  const rawBaseQuery = fetchBaseQuery({
    baseUrl: storeBaseUrl || 'http://localhost:3001/api'
  })
  // 执行实际请求逻辑
  return rawBaseQuery(args, api, extraOptions)
}

export const WebApi = createApi({
  reducerPath: 'API',
  baseQuery: dynamicBaseQuery, // 替换为自定义的动态baseQuery
  endpoints: () => ({}),
})

实现说明 #

RTK Query的baseQuery配置项接收任意符合格式的异步函数，函数入参的api对象自带getState方法，可直接获取当前store的全量状态。每次发起请求时都会先从store拉取最新的baseUrl，再生成请求实例，后续只要更新store中存储的baseUrl值，新发起的请求会自动生效。

注意事项 #

• 代码中api.getState().你的slice名称.baseUrl需要替换为你项目中实际存储baseUrl的state取值路径
• 建议添加兜底默认baseUrl，避免store中baseUrl未初始化时请求出错

内容的提问来源于stack exchange，提问作者simont