Отмена действия в компоненте
Условие
Поле ввода с кнопками <button class="undo"> и <button class="redo">. Каждое изменение попадает в историю; новое изменение после отмены стирает ветку возврата. Кнопки блокируются, когда идти некуда.
Что проверяют тесты
кнопки заблокированы в начале
отмена возвращает прошлое значение
возврат работает
новое изменение стирает ветку возврата
Как подойти
Три части истории в одном объекте состояния, а не в трёх - тогда все три обновляются атомарно и невозможно оказаться в противоречивом состоянии между рендерами. Обнуление future при новом изменении - то, что забывают, и пользователь возвращается в состояние из другой ветки истории. Для тяжёлых данных вместо снимков хранят команды с методом отмены.
Подсказки: 3
- Прошлое, настоящее и будущее лучше держать одним объектом состояния.
- Новое изменение обязано обнулять будущее.
- Функциональная форма сеттера нужна, чтобы не работать с устаревшим состоянием.
Решите в тренажёре
Редактор с автотестами прямо в браузере. Можно решить спокойно, вслух или под таймером, как на собесе.
Термины по теме
Ещё по теме «Состояние и useState/useReducer»
- Производное значение
- Стабильность dispatch
- Батчинг
- Ленивая инициализация state
- Функциональный апдейтер
- useReducer
- Апдейтер вперемешку со значением
- Ленивая инициализация