角度4 + Reduxの設定でフォームを処理する方法

Question

最小角度4の定型文で@angular-redux/storeとreduxを正常に実装しました。 私はReduxループの背後にあるアイデアを理解していますが、私は単純なカウンタインクリメントボタンの例を抜けてしまいます。

現時点では、私のAPIからJWTトークンを取得する必要があるコンポーネントとして単純なログインフォームを構築しています。 私はあまりにも複雑にしたくないので、フォームコンポーネントが他のコンポーネントに影響を与えないので、今はフォームの状態をストアに保存したくありません。

送信ボタンを押したときに、私のlogin.component.tsが私のAPIに対する検証とhttp要求を処理します。 フォーム提出もアクションですので、Reduxはいつここでプレーするのですか？

Answer 1

ストアにフォームの状態を維持する必要はありませんが作業上の全アプリが構築ngrx Link

上

より。反応形式を使用して検証と変更を処理します。あなたはストア内のすべてを保持する必要はありません。このアクションは、ログインAPIを呼び出します効果を、トリガされます

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

：アクションは、あなたがこのようにそれを派遣する必要がある

。成功またはエラーが発生した場合は、それを処理するための新しいアクションをディスパッチする必要があります。 呼び出しが成功した場合は、このエフェクトから例えばLOGIN_SUCCESSのアクションをディスパッチします。このエフェクトは、ストアに保存される「ユーザーデータの取得」APIを呼び出す別のエフェクトで処理します。 jwtについては、localStorageに保存することができますので、アプリケーションはログイン状態を覚えています。あなたのコードでは、あなたはおそらく、ユーザーがログインしている場合には伝え観察可能なプロパティstatusを、持っているAuthenticationServiceを持っている。

エラーが発生した場合、あなたはあなたの店でいくつかのエラープロパティでこれを保存して、上に表示する必要があります形。

Answer 2

フォームは必須であり、ユーザーデータを収集する手段であり、すべての検証は、そのデータに対して実行して、将来の処理のためにアプリケーションで使用できることを確認するようなチェックです。

このようなシナリオでは、反応型フォームを使用することをお勧めします。これにより、バリデーターとロジックをフォームに追加し、すべてを1つの場所に維持するために必要な柔軟性が得られます。

送信をヒットしたときにすべての検証とチェックが行われた後で、フォームデータ全体をペイロードとしてオブジェクトとしての状態にディスパッチできます。その後、あなたのアプリケーションの周りに移動します。このthis.store.dispatch({ type: Form_Data , payload : this.form.value});

よう

。さらなる処理のために。あなたの州の一部として

反応性フォームの詳細については、linkをご確認ください。 ngrx v4のexampleそのレポlink