Я тестирую простой пейджинг с перехватчиками реагирования и задаюсь вопросом, как бороться со сбоями, чтобы он оставался действительным в состоянии?
Псевдокод:
function reducer(state, action) {
switch (action.type) {
case 'next':
return {page: state.page + 1};
case 'prev':
return {page: state.page - 1};
default:
throw new Error();
}
}
function Page() {
const [state, dispatch] = useReducer(reducer, { page: 1});
useEffect(() => {
loadMore(state.page)
.then(r => console.log(r))
.catch(e => {
// how to revert page without triggering this effect?
// cause if I do dispatch({type: 'prev'}) page will change, and this will re-run
console.log(e)
})
}, state.page)
return (
<>
Page: {state.page}
<button onClick={() => dispatch({type: 'prev'})}>-</button>
<button onClick={() => dispatch({type: 'next'})}>+</button>
</>
);
}
Давайте рассмотрим этот сценарий :
- мы начинаем со страницы 1
- пользователь нажимает далее
- страница увеличивается в состоянии
- useEffect запускается, сетевой запрос не выполняется.
- Страница в состоянии 2, но фактические данные имеют страницу 1
Я не могу отправить событие изменения страницы при перехвате, потому что это вызовет повторное получение, что я не хочу делать
Другой вариант, о котором я подумал, заключался в том, что мне, возможно, следует увеличивать страницу только после того, как я получу для нее данные, но тогда я буду создавать бесконечное число l oop в использовании. Причиной изменения страницы будет после получения данных?