Как обрабатывать формы в настройке Angular 4 + Redux

Я успешно реализовал @angular-redux/store и redux в своем минимальном шаблоне Angular 4. Я понимаю идею цикла Redux, но мне сложно провести мимо простых примеров кнопок приращения счетчика.

В настоящий момент я создал простую форму входа в систему как компонент, который должен захватить токен JWT из моего API. Я не хочу делать это слишком сложным, так что теперь я не хочу сохранять состояние формы в хранилище, так как компонент формы не влияет на другие компоненты, правильно?

Поэтому, когда я нажимаю кнопку отправки, мой login.component.ts будет обрабатывать проверку и HTTP-запрос для моего API. Но форма submit также является действием, поэтому, когда здесь появляется Редукс?

Ответ 1

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

Когда действие необходимо, вы отправите его следующим образом:

this.store.dispatch({ type: ACTION_TYPE, payload: this.form.value });

Это действие вызовет эффект, который вызовет API входа. После успеха или ошибки вам необходимо отправить новое действие для его обработки. Если ваш вызов преуспеет, вы отправите действие из этого эффекта, например LOGIN_SUCCESS, с которым вы будете обрабатывать другой эффект, который вызовет, например, API "Получить пользовательские данные", который вы сохраните в магазине. Что касается jwt, в этом эффекте вы можете сохранить его в localStorage, чтобы приложение запоминало состояние входа в систему. В вашем коде у вас, вероятно, есть AuthenticationService, у которого есть наблюдаемое свойство status, которое сообщает, что пользователь вошел в систему.

Если произошла ошибка, вам нужно сохранить это в некотором свойстве errors в вашем магазине и отобразить его в форме.

Ответ 2

Формы являются необходимыми средствами для сбора пользовательских данных, и все проверки подобны проверкам, которые вы выполняете над этими данными, чтобы убедиться, что они пригодны для вашего приложения для дальнейшей обработки.

Для такого сценария реактивная форма - это лучшее, что вы можете использовать, она даст вам всю гибкость, необходимую для добавления валидаторов и логики в форму и сохранения всего в одном месте.

Только после того, как все проверки и проверки будут выполнены, когда вы нажмете submit, вы можете отправить все данные формы как полезную нагрузку в состояние как объект.

как этот this.store.dispatch({ type: Form_Data , payload : this.form.value});

который затем перемещается по вашему приложению. для дальнейшей обработки. как часть вашего государства.

Для получения дополнительной информации об использовании реактивных форм проверьте эту ссылку .

Подробнее о ngrx Ссылка

Все приложение построено на ngrx v4, работающем пример его repo ссылка