Помогите с кастомным хуком
Всем привет. Я тут пытался сделать хук для динамической пагинации. Вроде, сделал, но пока не так, как хотел, но это ладно. Недавно заметил проблему. Если зайти на один раздел сайта - произойдет первая подгрузка данных для 1 страницы. Потом листаем вниз, происходит подгрузка данных для 2 страницы и т.д. Данные у меня хранятся в редакс сторе, а текущие номера страниц в локальном стейте хука. И, получается, что если зайти на другой раздел, а потом снова перейти на первый, то те данные, которые мы подгружали в первый раз остануться в сторе, а вот номер текущей страницы в хуке сбросится и все начнется с начала с дублированием. Если ли какой-то вариант оставить хранение данных на своих места(данные в сторе, номер страницы в локальном стейте хука), но чтобы страница не сбрасывалась.
// Временный вариант реализации, пока не разберусь с ошибкой основного
const useDynamicPagination = (requestFunction, totalCount, startPage = 1, limit = 10) => {
const [isFetching, setIsFetching] = useState(true);
const [currentPage, setCurrentPage] = useState(startPage);
const [pagesCount, setPagesCount] = useState(0);
useEffect(() => {
const fetchData = async () => {
if (isFetching) {
await requestFunction(currentPage, limit);
setCurrentPage(p => p + 1);
setPagesCount(Math.ceil(totalCount / limit) || 3);
}
setIsFetching(false);
}
fetchData();
// Знаю, что зависимости неправильные
}, [isFetching])
const scrollHandler = useCallback((e) => {
const scrollPosition = e.target.documentElement.scrollHeight - (e.target.documentElement.scrollTop + window.innerHeight);
if (scrollPosition < 100 && currentPage < pagesCount) {
setIsFetching(true);
}
}, [pagesCount])
useEffect(() => {
document.addEventListener('scroll', scrollHandler);
return () => {
document.removeEventListener('scroll', scrollHandler)
};
}, [scrollHandler]);
return {currentPage, isFetching};
}
Компонент, где я использую хук.
const HomeContainer = ({posts, getPosts, totalCount}) => {
const {currentPage, isFetching} = useDynamicPagination(getPosts, 100);
return <Home posts={posts}/>;
}