CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunkredux-toolkit
LOTUSMS
LOTUSMS

Reputation: 10240

Passing multiple params from createAsyncThunk to my page

Given the following 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

And the view page (simplified)

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

How can I pass those params to the view? I am used to doing it with one param. Usually id, but never with a group of params. const {rowTitle, sortingMetric, dateGranularity, weekStartDate} = groupParams; and passing groupParams in the async args didn't work either.

Hardcoding the params makes it work but I cant do that. I need to pass the params as props so that they can change when the state changes in the view

Upvotes: 0

Views: 610

Answers (1)

Alpfreda
Alpfreda

Reputation: 397

You need to change code like this

export const fetchCarouselData = createAsyncThunk(
  'carouseldata/fetchCarouselData', 
  async (arge) => { 
const {rowTitle, sortingMetric, dateGranularity, weekStartDate} = arge
    try {
      const response = await axios.get(

because you pass as object

Upvotes: 1

Related Questions