Redux Toolkit：从Form Slice取参数添加到AsyncThunk的API请求URL

修改后的Profile Slice代码 #

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'
import { IMAGE_API, ACCESS_KEY } from "../../app/utils/constant";

// 修改异步Thunk，通过thunkAPI获取store状态
export const getImages = createAsyncThunk('images', async (_, thunkAPI) => {
  // 获取整个Redux store的状态
  const state = thunkAPI.getState();
  // 从Form Slice中取出存储的users数据
  const users = state.users;
  
  // 处理无用户数据的边界情况
  if (!users.length) {
    return [];
  }
  
  // 提取自定义参数（示例取最后一个用户的customParam字段，可根据实际结构调整）
  const customParam = users[users.length - 1].customParam;
  
  // 拼接带自定义参数的API请求地址
  const apiUrl = `${IMAGE_API}${customParam}${ACCESS_KEY}`;
  return fetch(apiUrl).then(res => res.json())
})

const ProfilePicSlice = createSlice({
  name: 'imageList',
  initialState: {
    images: [],
    loading: false,
  },
  extraReducers: (builder) => {
    builder.addCase(getImages.pending, (state) => {
      state.loading = true;
    })
    builder.addCase(getImages.fulfilled, (state, action) => {
      state.loading = false;
      state.images.push(action.payload);
    })
    builder.addCase(getImages.rejected, (state) => {
      state.loading = false; // 修正原代码错误的loading状态设置
    })
  }
});

export default ProfilePicSlice.reducer

原Form Slice代码（无需修改） #

import { createSlice } from "@reduxjs/toolkit";

const initialState = []

const UserSlice = createSlice({
  name: 'users',
  initialState,
  reducers: {
    addUser: (state, action) => {
      state.push(action.payload);
    }
  }
});

export const {addUser} = UserSlice.actions;
export default UserSlice.reducer;

核心修改说明 #

• 给createAsyncThunk的异步函数添加thunkAPI参数，通过thunkAPI.getState()获取全局Redux状态，从而拿到Form Slice中存储的users数据。
• 根据实际业务逻辑从users数组中提取自定义参数（示例取最后一个用户的customParam字段，可根据你的数据结构调整取值规则）。
• 将自定义参数拼接进API请求URL，实现动态参数的接口请求。
• 修正了getImages.rejected分支中错误的loading状态设置，确保请求失败后加载状态能正确重置。

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