Этот проект реализован, чтобы понять связь между реакцией и редукцией.
Требования к проекту
- Пользователю необходимо ввести имя автора цитаты в текстовое поле Name и текст цитаты в текстовом поле Body.
- Как только пользователь нажмет кнопку «Отправить», на экране отобразится новый компонент.
- На приведенном выше экране отобразятся детали предложения в виде списка UL.
- Пользователь сможет отредактировать название и текст предложения, щелкнув соответствующий элемент списка (созданный на шаге 3).
Карта разума
На приведенном ниже рисунке поясняется управление состоянием и использование избыточности для этого проекта.
Из рисунка выше видно, что исходные данные формы будут храниться в хранилище редуктов.
Второй пользовательский интерфейс может получить значение состояния из хранилища избыточности.
Таким образом, снижение государственной зависимости. Хотя плюсы использования redux для этого проекта не очевидны, но это будет иметь больше смысла по мере роста проекта.
Структура папок
Скрины как ниже
При нажатии кнопки «Отправить» компонент Списки котировок будет отображаться. Что происходит, когда пользователь вводит другую цитату в форму Управление ценами?
При вводе нескольких предложений будет создан список в компоненте Списки предложений.
Что произойдет, если пользователь допустит ошибку и захочет исправить какие-либо элементы списка?
Им нужно только щелкнуть элемент списка, и откроется новая форма с автоматически заполненным значением. Эта форма позволит пользователю изменить детали котировки. Обратитесь к изображению ниже -
Если интересно, обратитесь к исходному коду ниже -
Удачного кодирования!
