問題タブ [redux-form]

Redux フォームの検証の例には、個々のフィールドの検証のみが含まれています。

一定数の同じフィールドのリストがある場合、入力の少なくとも 1 つが有効な電子メール アドレスであることを要求する検証をどのようにモデル化できますか?

たとえば、次のフィールドで構成される特定のフォームの場合:

• ユーザー1、
• ユーザー 2、
• ユーザー3、
• スペシャルユーザー4

特別なユーザー 4 を常に設定し、最初の 3 人のユーザーのいずれかを必要とする検証関数を作成するにはどうすればよいですか?

redux-form をチェックしていたところですが、キーを押すたびにアクションが発生し、フィールドを切り替えるとフォーカスとブラーが発生することに気付きました。

大規模で複雑なアプリケーションでキーを押すたびにアクションをトリガーすることに関する私の懸念は、ユーザーが長い入力フィールドですばやく入力すると、動作が著しく遅くなる可能性があることです。(開発時に redux devtools の LogMonitor が不必要に肥大化することは言うまでもありません)

非常に多くのアクションのディスパッチを無効にする方法はありますか? (スロットリングによって、またはフィールドが切り替えられたとき、または Enter キーが押されたときにのみ)

redux-formと Fetch APIを使用してサーバー側の検証を行う方法は? サーバー側の検証を行うための推奨される方法は、onSubmit 関数から promise を返すことであると述べているドキュメントで提供されている「Submit Validation 」デモがあります。しかし、その約束をどこに置くべきですか？私が理解したように、 onSubmit 関数は私の行動でなければなりません。

this.props.addWidget は実際には私のアクションであり、以下に示します。

ご覧のとおり、fetch API を使用しています。fetch が promise を返し、redux-form がそれをキャッチすることを期待していましたが、うまくいきません。例の約束でそれを機能させるには?

また、デモから、 this.props.handleSubmit 関数で何を提供する必要があるのか​​ 理解できません。この部分については、デモでは説明していません。

公式ページとredux-formの GitHub の問題には、 initialValuesの操作方法の例が複数ありますが、非同期ソースに応答してinitialValuesを設定する方法を説明することに焦点を当てた例は 1 つも見つかりません。

私が念頭に置いている主なケースは、ユーザーが既存のエンティティを編集する単純な CRUD アプリケーションのようなものです。ビューが最初に開かれ、redux-form コンポーネントがマウントされるが、コンポーネントがレンダリングされる前に、initialValues を設定する必要があります。この例では、コンポーネントが最初にマウントされ、初めてレンダリングされるときに、データがオンデマンドで読み込まれるとします。例は、ハードコードされた値または redux ストアの状態に基づいて initialValues を設定することを示していますが、XHR やフェッチへの呼び出しなどの非同期に基づいて initialValues を設定する方法に焦点を当てることができるものはありません。

基本的なものが欠けていると確信しているので、正しい方向に向けてください。

参考文献:

• フォーム状態の初期化
• フォームのデフォルトの処理
• 動的フォームに初期データを入力する正しい方法は何ですか?

ReactでReduxを使用しています。プログラムでアクションとリデューサーを定義しました。onClick イベントで状態を変更したいのですが、変更されません。

これは私のコードです:

subscribe メソッドを試して再レンダリングしましたが、機能しません。

redux、react-redux、redux-formに頭を悩ませようとしています。

ストアをセットアップし、redux-form からレデューサーを追加しました。私のフォームコンポーネントは次のようになります:

ログインフォーム

これは期待どおりに機能します。redux DevToolsでは、フォーム入力時にストアがどのように更新され、loginアクション作成者がログイン アクションをディスパッチするフォームを送信するかを確認できます。

Redux-thunkミドルウェアをストアに追加し、Async Actions の redux ドキュメントで説明されているように、ログイン用のアクション クリエーターをセットアップしました。

authActions.js

繰り返しますが、redux DevTools では、これが期待どおりに機能することがわかります。LoginFormでdispatch(login(formData))が呼び出されるとonSubmit、最初にLOGIN_REQUESTアクションがディスパッチされ、その後にLOGIN_SUCCESSorが続きLOGIN_FAILUREます。ストアにプロパティを追加LOGIN_REQUESTし、このプロパティを削除します。(これがreselectを使用する何かになる可能性があることはわかっていますが、今のところは単純に保ちたいと思います。state.auth.pending = trueLOGIN_SUCCESSLOGIN_FAILURE

さて、redux-form docs でonSubmit、フォームの状態を更新する約束を返すことができることを読みました（submitting、error）。しかし、これを行う正しい方法が何であるかはわかりません。dispatch(login(formData))戻りますundefined。

state.auth.pendingストア内のフラグを、request、success、failurestate.auth.statusの値などの変数と交換できます(これには、おそらく reselect などを使用できます)。

次に、ストアをサブスクライブして、次のようonSubmitに変更を処理できます。state.auth.status

ただし、このソリューションは気分が悪く、アプリが成長し、他のソースからより多くのアクションがディスパッチされる可能性がある場合に、常に期待どおりに機能するかどうかはわかりません.

私が見た別の解決策は、api 呼び出し (promise を返す) を に移動することですonSubmitが、React コンポーネントから分離したままにしたいと思います。

これに関するアドバイスはありますか？

redux-form の検証に合格すると、他の HTML フォームと同じように送信されるフォームを作成しようとしています。検証が失敗した場合は、すべてのフィールドに触れて送信を防止したいと考えています。

したがって、次のいずれかを行う必要があります。検証が失敗した場合にフィールドに触れる独自の onSubmit 関数を作成します。私がしようとしているもの：

この実装:

次のエラーが発生TypeError: Cannot read property 'indexOf' of undefinedします: への呼び出しからtouch。の実装でこのエラーが発生している場所を正確に追跡するのに苦労していますがtouch、それは間違いなくそれへの呼び出しtouchです。

組み込みの handleSubmit を使用すると、検証が失敗した場合に適切な動作が得られますが、検証が成功した場合に通常の HTML フォームのようにフォームを送信する方法がわかりません。

これは機能しますが、それを行うには悪い方法のようです。