Angular 4 + Redux kurulumundaki formlar nasıl işlenir

Question

En az benim Angular 4 boilerplate'de @angular-redux/store ve redux'u başarıyla uygularım. Redux döngüsünün arkasındaki fikri anlıyorum, ancak basit karşı arttırma butonu örneklerini geçmem için zor bir zamanım var.

Şu anda API'mdan bir JWT jetonu alması gereken bir bileşen olarak basit bir oturum açma formu oluşturdum. Bunu çok karmaşık yapmak istemiyorum, bu yüzden bir form bileşeni diğer bileşenleri etkilemediğinden, form durumunu depoda saklamak istemiyorum, doğru mu?

Gönderme düğmesine bastığımda, login.component.ts benim doğrulamam ve http isteğimi API'm ile işleyecektir. Ama bir form göndermek de bir eylemdir, bu yüzden Redux ne zaman burada oynanır?

Answer 1

deposunda formu durumunu tutmak için gerek yoktur çalışmaya Bütün bir uygulama inşa ngrx Link

üzerinde

Daha. Doğrulamaları ve değişiklikleri işlemek için reaktif bir form kullanın. Her şeyi mağazada tutmak zorunda değilsiniz. Bir eylem bunu böyle gönderecek tabi

:

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

Bu eylem giriş API arayacak bir etkisi, tetikleyecektir. Bir başarıdan veya bir hatadan sonra, işlemek için yeni bir eylem göndermeniz gerekir. Aramanız başarılı olursa, bu etkiden bir eylem gönderirsiniz; örneğin, LOGIN_SUCCESS gibi başka bir etkide ele alacağınız bir işlem gönderirsiniz; bu, örneğin, mağazaya kaydedeceğiniz 'Kullanıcı verilerini al' API'sini çağırır. jwt'a gelince, bu etkiyi localStorage'a kaydedebilirsiniz, böylece uygulama oturum açmış durumu hatırlar. Kodunuzda, kullanıcının oturum açıp açmadığını belirten, status numaralı bir gözlemlenebilir özelliğe sahip olan bir AuthenticationService var demektir.

Bir hata olursa, bunu mağazadaki bazı hatalar özelliğinde kaydetmeniz ve ekranda görüntülemeniz gerekir. form.

Answer 2

Formlar, kullanıcı verilerini toplamak için bir araçtır ve tüm doğrulamalar, gelecekteki işlemler için uygulamanız için kullanılabilir olduğundan emin olmak için bu veriler üzerinde yaptığınız denetimler gibidir.

Böyle bir senaryoda, kullanabileceğiniz en iyi çözüm reaktif biçimdir, bu, formda validators ve mantığı eklemek ve her şeyi tek bir noktada tutmak için ihtiyacınız olan tüm esnekliği size sağlayacaktır.

Gönderme sırasında tüm doğrulama ve kontroller tamamlandıktan sonra, tüm form verilerini bir yük olarak nesneye nesne olarak gönderebilirsiniz. Daha sonra başvurunuzu etrafında hareket edecek bu this.store.dispatch({ type: Form_Data , payload : this.form.value});

gibi

. daha fazla işlem için. Eyaletinizin bir parçası olarak.

Reaktif formları kullanma hakkında daha fazla bilgi için, bu link numaralı telefonu kontrol edin. ngrx v4 example onun repo link