/907sv-lab4-1

Лабораторная №4 по теме Redux

Primary LanguageTypeScript

Лабораторная №4 по теме "Redux"

Разработка ведётся по методологии TDD: вначале пишем тесты, потом пишем компонент, который проходит тесты. Если это тяжело психологически, можно параллельно писать компонент и тест.

В этой лабораторной надо реализовать динамический список с фильтрацией и поиском. Примерный скриншот: screenshot

Задание 1

  • Аккуратно перенести компоненты и стор из третьей лабы.
  • Прикрутить Redux Provider.
  • В компонентах использовать useSelect и useDispatch вместо пробрасывания state и dispatch.

Задание 2

  • Сделать в фильтре набор значений (селектбокс/радиобатон/нажимаемые ссылки): "все", "сделанные", "не сделанные".
    • При изменении складываем в стор.
  • Сделать в фильтре текстовое поле поиска.
    • Складывать введённое значение в стор.
  • Показывать в списке элементы с учётом фильтра:
    • Элементы, у которых в title встречается строка, введённая в поле (регистронезависимо).
    • Элементы с учётом выполненности.

Задание 3 [опционально, пригодится в lab5]

  • Сделать компонент Alert, показывающий всплывающий и исчезающий массив ошибок.
  • Ошибки показываются, потом скрываются через 3 секунды.
  • Ошибки хранятся в сторе в state.errors:
    • messages: string[];
    • isShowing: boolean;
  • Показывать ошибку при попытке создать пустой элемент.
  • Показывать ошибку при попытке создать элемент с таким же title.
  • Когда все ошибки показаны, сбрасывать флаг ошибки, очищать messages.

Требования к компонентам:

ListItem, List, Form

(те же требования, что и в третьей лабе)

Filter

  • Отображает селектбокс с вариантами фильтрации "все", "сделанные", "не сделанные".
  • Отображает поле ввода, при вводе в которое осуществляется фильтрация по подстроке.

Alert [опционально]

  • Пропсы:
    • isShown: boolean; при изменении в true начинается показ сообщений.
    • messages: string[]; список показываемых сообщений.
    • delay: number = 3000; через сколько миллисекунд скрывать.
    • onClose: () => {}; обработчик закрытия.
  • Можно сделать кнопку досрочного закрытия.

Store

  • В сторе хранится текущее состояние приложения:
    • Массив элементов.
    • Текущее значение фильтра состояния (все/сделанные/не сделанные).
    • Текущее значение фильтра подстроки.

Selector

  • Выдаёт актуальный список элементов в соответствии со значениями фильтров.
  • Можно комбинировать селекторы:
    • Написать селектор по подстроке.
    • Написать селектор по состоянию.
    • Вызвать один на результатах другого.

Что почитатать: