给定以下切片

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
  ]
);

我如何将这些参数传递给视图呢？我习惯于用一个参数来传递。通常是id，但从来没有用一组参数。const {rowTitle, sortingMetric, dateGranularity, weekStartDate} = groupParams;和在异步参数中传递groupParams也不起作用。
对参数进行硬编码可以使其工作，但我不能这样做。我需要将参数作为属性传递，以便它们可以在视图中的状态改变时改变