I have made an API call in my react app, using hooks, redux and thunk and it works perfectly. I am able to display the data in my component.
However, the problem is that the array is too long - 249 objects inside it. I would like to split this array into chunks of 25 objects each and when the user reaches the bottom of the page, fetch the next 25 chunks and so on till the entire list is consumed.
Here's my approach so far:
const movies = useSelector((state: RootStateOrAny) => state.shows)
const searchResults = useSelector((state: RootStateOrAny) => state.shows);
useEffect(()=> {
setLoading(true);
dispatch(fetchAllShows());;
}, [dispatch])
var start, max, paginatedArr=[], pageSize = 25;
for(start = 0; max = movies.length, start < max; start += pageSize) {
paginatedArr = movies.slice(start, start + pageSize);
}
This fetches 25 items from the movies array but it doesn't start from the first object. Please how do I rectify this and obtain the use-case I want? Thanks.
const res: any = []; // const splicedArray = function spliceMovies (arr: any, chunkSize: number) { function spliceMovies (arr: any, chunkSize: number) { while (arr.length > 0) { const chunk = arr.splice(0, chunkSize); res.push(chunk); } return res; } // console.log(splicedArray); console.log(spliceMovies(movies, 25));spliceMoviesdoes, but the code in your question does not. It just repeatedly overwritepaginatedArrwith an array, so it ends up with the last chunk from the loop.