Redux Toolkit动态URL问题：修改category后请求参数未更新

你定义的url变量是在代码初始化阶段就固定下来的，只会使用initialState里的初始category值。后续Redux state中的category更新时，这个变量不会重新计算，导致请求始终用旧的URL发起。

有两种常用的修复方式，按需选择：

方法1：在Async Thunk中动态获取当前state的category #

通过thunkAPI.getState()获取最新的Redux state，在请求时动态生成URL：

export const getProducts = createAsyncThunk(
  "products/getProducts",
  async (_, thunkAPI) => { 
    // 获取当前state中的最新category
    const currentCategory = thunkAPI.getState().product.category;
    // 动态拼接URL
    const url = `https://api.spoonacular.com/food/menuItems/search?query=${currentCategory}&number=10&apiKey=API_KEY`;

    try {
      const response = await axios(url);
      console.log(response);
      return response.data; // response.data已被axios自动解析，无需额外await
    } catch (error) {
      return thunkAPI.rejectWithValue({ error: error.message });
    }
  }
);

使用这种方法时，需要在category更新后重新dispatch getProducts，比如在组件中切换分类的逻辑里：

// 组件中的切换分类逻辑
const handleCategoryChange = (newCategory) => {
  dispatch(pickCategory(newCategory));
  dispatch(getProducts()); // 重新触发请求，此时会用新的category生成URL
};

方法2：调用Async Thunk时传入category参数 #

直接把最新的category作为参数传给getProducts，避免依赖state：

export const getProducts = createAsyncThunk(
  "products/getProducts",
  async (category, thunkAPI) => { 
    const url = `https://api.spoonacular.com/food/menuItems/search?query=${category}&number=10&apiKey=API_KEY`;

    try {
      const response = await axios(url);
      console.log(response);
      return response.data;
    } catch (error) {
      return thunkAPI.rejectWithValue({ error: error.message });
    }
  }
);

然后在组件中切换分类时，同时传入新的category：

const handleCategoryChange = (newCategory) => {
  dispatch(pickCategory(newCategory));
  dispatch(getProducts(newCategory)); // 直接传入最新的category
};

• 不要把url定义在模块顶层，因为模块代码只会执行一次，后续state变化不会更新这个变量
• 确保在category更新后重新触发getProducts，否则即使URL生成逻辑正确，也不会发起新请求

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