如何从createAsyncThunk向页面传递多个动态参数？

我之前习惯用单个参数（如id）进行传递，从未尝试过传递一组参数。现在需要通过createAsyncThunk传递rowTitle、sortingMetric、dateGranularity、weekStartDate这多个参数，尝试过解构参数对象的方式但没生效。硬编码参数可以正常运行，但我需要将这些参数作为props传递，使其能随页面状态变化而更新。

原Slice代码 #

import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";

const KEY = process.env.REACT_APP_API_KEY
const URL = process.env.REACT_APP_BASE_URL
const API = `${URL}/interimtoptitles`

const initialState = {
  carouseldata:{},
  status: 'idle',  //'idle', 'loading', 'succeeded', 'failed'  
  error:null
}

export const fetchCarouselData = createAsyncThunk(
  'carouseldata/fetchCarouselData', 
  async (rowTitle, sortingMetric, dateGranularity, weekStartDate) => { 
    try {
      const response = await axios.get(
        API,
        {
          headers: {
            'Content-Type': 'application/json',
            'X-API-KEY': KEY,
          },
          params: {
            rowTitle:         rowTitle,
            sortingMetric:    sortingMetric,
            dateGranularity:  dateGranularity,
            weekStartDate:    weekStartDate
          },
        }
      )
      const loadedCarousel = response.data.Item;

      console.log("loadedCarousel: ", loadedCarousel);
      return loadedCarousel;

    } catch (error) {
      console.error('API call error:', error.message);
    }
  }
)

const carouselSlice = createSlice({
  name: 'carouseldata',
  initialState,
  reducers:{},
  extraReducers: {
    [fetchCarouselData.pending]: (state, action) => {
      state.status = "loading"
    },
    [fetchCarouselData.fulfilled]: (state, { payload }) => {
      state.status = 'succeeded'
      state.carouseldata = payload
    },
    [fetchCarouselData.rejected]: (state, action) => {
      state.status = "failed"
    },
  }
})

// SELECTORS
export const getCarouselData = (state) => state.carouseldata.carouseldata;
export const getCarouselStatus = (state) => state.carouseldata.status;

export default carouselSlice.reducer

原页面简化代码 #

const [state, setState] = useState({
  category: "Saved Titles",
  metric: "liked",
  granularity: "All Time",
  startdate: convertDate(getPrevMonday(new Date(addDays(prevMonday, -7)))),
  enddate: prevSunday, //all are required except this one
})

const {rowTitle, sortingMetric, dateGranularity, weekStartDate} = useParams();
const dispatch = useDispatch();

const carouseldata = useSelector(getCarouselData);
const status = useSelector(getCarouselStatus)

useEffect(() => { 
  dispatch(fetchCarouselData({
    rowTitle: state.category, 
    sortingMetric: state.metric, 
    dateGranularity: state.granularity, 
    weekStartDate: state.startdate,
  })); 

}, 
  [
    dispatch, 
    state.category, 
    state.metric, 
    state.granularity, 
    state.startdate, 
    state.enddate, 
    rowTitle, 
    sortingMetric, 
    dateGranularity, 
    weekStartDate
  ]
);

解决方案 #

问题出在createAsyncThunk的回调函数仅支持接收单个参数。你现在dispatch时传入的是一个参数对象，但thunk里却把它拆成了四个独立参数，导致后三个参数都是undefined，自然无法正确传递。

修改方式如下：

1. 修正Slice中的fetchCarouselData

将thunk的回调参数改为接收一个对象，并解构出需要的字段：

export const fetchCarouselData = createAsyncThunk(
  'carouseldata/fetchCarouselData', 
  // 接收单个参数对象，直接解构
  async ({ rowTitle, sortingMetric, dateGranularity, weekStartDate }) => { 
    try {
      const response = await axios.get(
        API,
        {
          headers: {
            'Content-Type': 'application/json',
            'X-API-KEY': KEY,
          },
          params: {
            rowTitle,
            sortingMetric,
            dateGranularity,
            weekStartDate
          },
        }
      )
      const loadedCarousel = response.data.Item;

      console.log("loadedCarousel: ", loadedCarousel);
      return loadedCarousel;

    } catch (error) {
      console.error('API call error:', error.message);
      // 抛出错误让rejected状态捕获
      throw error;
    }
  }
)

2. 优化页面的useEffect依赖（可选）

你的useEffect依赖数组里包含了useParams的字段，但当前dispatch时并没有用到这些字段，而是用了state里的值。如果不需要这些URL参数，可以从依赖数组中移除，避免不必要的重触发：

useEffect(() => { 
  dispatch(fetchCarouselData({
    rowTitle: state.category, 
    sortingMetric: state.metric, 
    dateGranularity: state.granularity, 
    weekStartDate: state.startdate,
  })); 

}, 
  [
    dispatch, 
    state.category, 
    state.metric, 
    state.granularity, 
    state.startdate
  ]
);

这样修改后，参数就能正确传递，并且会随着页面state的变化自动更新请求。

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