如何用Redux-Toolkit中间件为请求URL添加locale查询参数？

核心思路 #

Redux中间件本身不会直接获取请求URL，因为它的作用是拦截和处理Redux action。你需要在发起请求的action中携带URL（或请求配置），再通过中间件识别这类action并修改URL。

具体实现步骤 #

1. 约定请求action的格式 #

给所有API请求类型的action添加标识（比如meta.isApiRequest），同时在action的payload中包含请求的URL和其他配置：

// 示例：发起API请求的action创建函数
const fetchUserData = () => ({
  type: 'USER/FETCH_DATA',
  payload: {
    url: '/api/user/profile',
    method: 'GET',
    // 其他请求配置（如headers、body等）
  },
  meta: {
    isApiRequest: true // 标记这是需要处理的API请求action
  }
});

2. 编写中间件处理请求URL #

在中间件中识别带有isApiRequest标记的action，从store获取当前语言，修改URL后传递修改后的action：

const localeMiddleware = store => next => action => {
  // 仅处理标记为API请求的action
  if (action.meta?.isApiRequest) {
    const { chosenLang } = store.getState().language;
    // 构造完整URL（处理相对路径）
    const url = new URL(action.payload.url, window.location.origin);
    // 添加locale查询参数
    url.searchParams.set('locale', chosenLang);
    
    // 创建修改后的action，保留原action的其他属性
    const modifiedAction = {
      ...action,
      payload: {
        ...action.payload,
        url: url.toString()
      }
    };
    
    // 传递修改后的action到下一个环节
    return next(modifiedAction);
  }

  // 非API请求action直接传递
  return next(action);
};

3. 注册中间件到store #

将中间件添加到Redux store的中间件列表中：

const store = configureStore({
  reducer: {
    // 你的reducer配置
    language: languageReducer,
    user: userReducer
  },
  middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(localeMiddleware)
});

针对Redux Toolkit createAsyncThunk的优化方案 #

如果你的项目用Redux Toolkit的createAsyncThunk发起请求，有两种处理方式：

方式1：在thunk内直接处理（简单直接）

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUserData = createAsyncThunk(
  'user/fetchData',
  async (_, { getState }) => {
    const { chosenLang } = getState().language;
    const url = new URL('/api/user/profile', window.location.origin);
    url.searchParams.set('locale', chosenLang);
    
    const response = await fetch(url.toString());
    return response.json();
  }
);

方式2：中间件统一拦截

如果想批量处理所有createAsyncThunk请求，可以自定义中间件识别thunk类型的action，再修改请求参数，这种方式适合大规模统一配置场景。

注意事项 #

• 处理相对URL时，必须结合当前页面的window.location.origin构造完整URL，才能使用URL对象操作查询参数。
• 如果使用axios等请求库，也可以结合请求库的拦截器配合Redux中间件使用，进一步简化请求逻辑。

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