Poradnik obsługi formularzy w konfiguracji Angular 4 + Redux

Pomyślnie zaimplementowałem @angular-redux/store i redux w moim minimalnym układzie kątowym Angular 4. Rozumiem ideę pętli Redux, ale mam trudność, aby mnie pominąć przykłady prostych przycisków licznika.Poradnik obsługi formularzy w konfiguracji Angular 4 + Redux

W tej chwili mam zbudować prosty formularz logowania jako składnik, który musi pobrać token JWT z mojego API. Nie chcę, aby było to zbyt skomplikowane, więc na razie nie chcę przechowywać stanu formularza w sklepie, ponieważ komponent formularza nie wpływa na inne komponenty, prawda?

Kiedy kliknę przycisk przesyłania, mój login.component.ts obsłuży żądanie weryfikacji i http mojego API. Ale przesłanie formularza jest również akcją, więc kiedy pojawia się Redux, aby zagrać tutaj?

Źródło

2017-08-12 user3411864

Nie sądzę, żeby miało sens używanie redux do formularza logowania (nie jest to zależne od stanu), zamiast tego użyj formularza reaktywnego, aby łatwo zweryfikować dane wejściowe za pomocą wbudowanej funkcji: https://angular.io/guide/reactive-forms – user3492940

To już jest forma reaktywna. Ale zalogowane i wylogowane są państwa, prawda? – user3411864

Nie mam dużego doświadczenia z reduxem, ale wydaje mi się, że ten artykuł może w jakiś sposób odpowiedzieć na twoje pytanie. http://brianflove.com/2017/04/10/angular-reactive-authentication/ – trungk18

Nie ma potrzeby, aby utrzymać stan formularz w sklepie. Użyj formularza reaktywnego do obsługi walidacji i zmian. Nie musisz przechowywać wszystkiego w sklepie.

Kiedy potrzebne jest działanie będzie wysłanie go tak:

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

Ta akcja wywoła efekt, który nazywamy logowania API. Po sukcesie lub błędzie musisz wysłać nową akcję, aby go obsłużyć. Jeśli twoje połączenie się powiedzie, wyślesz akcję z tego efektu, na przykład LOGIN_SUCCESS, którą obsłużysz w innym efekcie, który wywoła na przykład API "Uzyskaj dane użytkownika", które zapiszesz w sklepie. Jeśli chodzi o jwt, w efekcie można go zapisać w localStorage, aby aplikacja zapamiętała stan zalogowania. W twoim kodzie prawdopodobnie masz , która ma obserwowalną właściwość status, która mówi, czy użytkownik jest zalogowany.

Jeśli wystąpi błąd, musisz zapisać go w niektórych właściwościach błędów w swoim sklepie i wyświetlić go na Formularz.

Źródło

2017-08-21 14:29:55 Matsura

Czy wysyłka nie jest tym samym, co przechowywanie? Ponieważ wysyłasz pełny ładunek formularza do sklepu? – user3411864

@ user3411864 Wysłanie rozpoczyna działanie. Musisz działać w ten sposób w efekcie i ostatecznie w reduktorze. Reduktor zwraca nowy stan, podczas gdy efekt dla przykładu wywołuje API. Sama akcja nic nie robi. Ładunek jest arbitralny, możesz przekazać wszystko, czego potrzebujesz dla tej akcji. – Matsura

Mam ten obraz na mojej ścianie https://uploads.toptal.io/blog/image/121874/toptal-blog-image-1484754099125-659f9aa8dbf05fea9aa209dc1de0f5e2.png, ale prawdopodobnie już nie jest on dokładny. Gdzie efekty pasują do tego schematu? Czy odnosisz się do '@ ngrx/effects'? Z kursu Udemy dowiedziałem się, że muszę wywołać akcję LOGIN_BUSY w funkcji onSubmit() w moim pliku component.ts, wykonać wywołanie asynchroniczne z interfejsem API, a po pomyślnym wysłaniu wywołać drugie wywołanie LOGIN_SUCCEED. Co jest nie tak z tym podejściem? – user3411864

Formularze są niezbędne do zbierania danych użytkownika, a wszystkie sprawdzenia są podobne do sprawdzeń wykonywanych na tych danych, aby upewnić się, że są one użyteczne dla aplikacji do przyszłego przetwarzania.

Do takiego scenariusza najlepiej jest użyć formularza reaktywnego, który zapewni Ci elastyczność niezbędną do dodania walidatorów i logiki do formularza i utrzymania wszystkiego w jednym miejscu.

Dopiero po wykonaniu wszystkich sprawdzeń i sprawdzeń po wysłaniu formularza można wysłać całe dane formularza jako ładunek do stanu jako obiektu.

jak ten this.store.dispatch({ type: Form_Data , payload : this.form.value});

które następnie poruszać się swoją aplikację. do dalszego przetwarzania. jako część twojego stanu.

Aby uzyskać więcej informacji na temat korzystania z formularzy reaktywnych, sprawdź to link.

Więcej na ngrx Link

Cała aplikacja budować na ngrx v4 pracuje example jego repo link

Źródło

2017-08-15 18:22:53

Poradnik obsługi formularzy w konfiguracji Angular 4 + Redux

Odpowiedz

Powiązane problemy