Код Middle Состояние и данные обновлено
Состояние бесконечной ленты
Условие
Опишите состояние ленты как чистую функцию. feedReducer(events) обрабатывает события по порядку, начиная с состояния { items: [], cursor: null, hasMore: true, loading: false }, и возвращает итоговое состояние:
["request"]: еслиloadingили!hasMore, ничего не делать; иначеloading = true;["page", ids, nextCursor]: только если идёт загрузка: добавитьidsбез дублей,cursor = nextCursor,hasMore = nextCursor !== null,loading = false;["error"]:loading = false;["refresh", ids, nextCursor]: заменитьitemsнаids, обновить курсор иhasMore,loading = false.
Ответ страницы без активной загрузки (запоздалый после refresh) игнорируется.
Примеры
feedReducer([["request"], ["page", ["a", "b"], "c2"]]) // {"items":["a","b"],"cursor":"c2","hasMore":true,"loading":false}
feedReducer([["request"], ["request"], ["page", ["a"], "c2"]]) // {"items":["a"],"cursor":"c2","hasMore":true,"loading":false}
feedReducer([["request"], ["page", ["a", "b"], "c2"], ["request"], ["page", ["b", "c"], null]]) // {"items":["a","b","c"],"cursor":null,"hasMore":false,"loading":false}
Как подойти
Подсказки: 2
- Каждое событие возвращает новое состояние; проверки делайте в начале ветки.
- Для дублей используйте
Setуже загруженных id.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.