如何在Angular 4 + Redux設置中處理表單

我在我的最小的Angular 4樣板中成功實現了@angular-redux/store和redux。我明白Redux循環背後的想法，但我很難讓我通過簡單的計數器增量按鈕示例。如何在Angular 4 + Redux設置中處理表單

目前我已經構建了一個簡單的登錄表單作爲一個組件，需要從我的API獲取JWT令牌。我不想讓它太複雜，所以現在我不想將表單狀態存儲在商店中，因爲表單組件不影響其他組件，對吧？

所以，當我點擊提交按鈕時，我的login.component.ts將處理驗證和http請求到我的API。但表單提交也是一個動作，所以Redux什麼時候來這裏玩呢？

來源

2017-08-12 user3411864

我認爲使用redux作爲登錄表單（這與狀態無關）並不合理，請使用反應形式，以便使用內置功能輕鬆驗證輸入：https：//angular.io/guide/reactive-forms – user3492940

它已經是一種反應形式。但登錄並註銷狀態是正確的？ – user3411864

我對redux沒有太多經驗，但看起來這篇文章可能會以某種方式回答你的問題。 http://brianflove.com/2017/04/10/angular-reactive-authentication/ – trungk18

沒有必要保持形式的國家在店裏。使用反應形式來處理驗證和更改。你不必把所有東西都放在商店裏。

當需要一個行動，你將派遣這樣的：

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

這一行動將引發效果，這將調用API登錄。在成功或出錯後，您需要派遣新的操作來處理它。如果您的通話成功，您將從此效果派發一個動作，例如LOGIN_SUCCESS，您將以另一種效果處理該效果，該效果將調用您將保存在商店中的「獲取用戶數據」API。至於jwt，您可以將其保存在localStorage中，以便應用程序記住登錄狀態。在你的代碼可能有一個具有可觀察到的財產status，如果用戶登錄其講述了一個AuthenticationService。

如果發生錯誤的時候，你需要把它保存在您的商店的一些錯誤性，在顯示它形成。

來源

2017-08-21 14:29:55 Matsura

因此調度與存儲不一樣嗎？因爲您將完整的表單有效載荷發送到商店？ – user3411864

@ user3411864調度僅啓動一個操作。你必須在一個效果中處理這個動作，最終在一個reducer中。 reducer返回新的狀態，而一個例子的效果調用API。行動本身什麼都不做。有效載荷是任意的，你可以通過你需要的任何行爲。 – Matsura

我的牆上有這張圖片https://uploads.toptal.io/blog/image/121874/toptal-blog-image-1484754099125-659f9aa8dbf05fea9aa209dc1de0f5e2.png但是可能它不再準確。效果在哪裏適合這個模式？你是指'@ ngrx/effects'？從Udemy課程中，我瞭解到我需要在component.ts文件的onSubmit（）函數中分派LOGIN_BUSY動作，對API進行異步調用，並在成功分派第二個調用LOGIN_SUCCEED時調用。這種方法有什麼問題？ – user3411864

表單是必不可少的手段來收集用戶數據，所有的驗證就像您對數據執行的檢查，以確保它可用於您的應用程序以供將來處理。

對於這樣的場景，被動形式是最好的，你可以使用，它會給你所有的靈活性，你需要添加驗證器和邏輯到表單，並在一個地方保持一切。

只有當您點擊提交後完成所有驗證和檢查後，您纔可以將整個表單數據作爲有效載荷分派到狀態對象中。

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

然後將左右移動應用程序。進一步處理。作爲你的國家的一部分。

有關使用反應形式的更多信息，請檢查此link。

更多關於NGRX Link

一整個應用程序建立在NGRX V4工作example其回購link

來源

2017-08-15 18:22:53

如何在Angular 4 + Redux設置中處理表單

回答

相關問題