My limit parameter in the API does not work

Viewed 36

I am working on a project. I am using one API but in two different ways which means one is pure API for the main page and in the other one, I added a limit parameter. But, the limit parameter does not work as I wish. I will explain it in the code. This is animeSlice:

const initialState = {
  items: [],
  inputItems: [],
}

export const fetchData = createAsyncThunk("anime/fetchData", async () => {
  const res = await axios.get(`${process.env.REACT_APP_API_KEY}`)
  // console.log(res.data.data)
  return res.data.data
})

export const fetchInputData = createAsyncThunk("anime/fetchInputData", async () => {
    const response = await axios.get(`${process.env.REACT_APP_API_KEY}?limit=5`)
    console.log(response.data.data)
    // return res.data.data
  }
)

export const animeSlice = createSlice({
  name: "anime",
  initialState,
  reducers: {},
  extraReducers: {
    [fetchData.fulfilled]: (state, action) => {
      state.items = action.payload
    },
    [fetchInputData.fulfilled]: (state, action) => {
      state.inputItems = action.payload
    },
  },
})

As you see, I have two createAsyncThunk. The limit parameter works very well in the first thunk, but doesn' t work in the second. This is the code searchComponent I will use second thunk:

import { useEffect, useState } from "react"

  useEffect(() => {
    dispatch(fetchInputData())
  }, [dispatch])

Thanks in advance!

EDIT: enter image description here

EDIT 2: enter image description here

0 Answers
Related