web-dev-qa-db-ja.com

FormikとRedux-Sagaでフォームの状態を処理する方法

私は最近、ReactプロジェクトでRedux-Sagaを使用し始めました。それは私にとって初めてであり、その仕組みを学びたかったからです。FormuxはRedux-FormがReactアプリケーションでフォームを管理することの人気。今、私はDan Abramovの "Reactを使用するというグローバルなアプリと、複雑な方法で変異することはありません。」

しかし、これはRedux-Sagaのドキュメントに記載されているSOMETHING_REQUESTED -> apiCall -> SOMETHING_SUCCESS or SOMETHING_FAILUREのパターンとは矛盾しています。たとえば、サガが非同期リクエストを実行するonSubmitのアクションをディスパッチするフォームがある場合、どこかにRedux状態で保存せずにフォームにそのリクエストのステータスを通知する方法がわかりません(避けたい正確なアンチパターン)。私が想像できる1つの代替案は、フォーム送信ハンドラー内でリクエストを実行し、それを佐賀に委任しないことですが、それで、Redux-Sagaのポイントは何ですか?

私の理解のギャップを埋めるのを手伝ってください。

編集:FYI このredux-sagaリポジトリのGitHubの問題 は私の質問に最も適切であるように思われ、そこには多くの記述がありますが、合意されたベストプラクティスに到達していないようです。

このredditスレッド もこのトピックを扱いますが、スレッドのOPと同様に、なぜ彼が Redux Promise Listener で見つけたソリューションが広く採用されていないのでしょうか?

8
peterlawless

私が想像できる1つの代替案は、フォーム送信ハンドラ内でリクエストを実行し、それを佐賀に委任しないことです

ファイルのアップロードを処理するにはこれで十分です。この操作にredux-sagaを使用すると、やり過ぎになります。私は、与えられたタスクのために正しいツールを選ぶように努力すべきだと思います。

でも、それで不思議に思います。redux-Sagaの意味は何ですか。

redux-sagaは、非同期操作を同期として行うための「プロセスマネージャ」と見なしてください。時々、コードの流れが予想され、驚きはありません。場合によってはそうではありませんが、副作用(API呼び出しなど)によって制御が反転するためです。したがって、私たちがいつ反応を得るかについて驚きと不確実性を引き起こします。

どこかにRedux状態で保存せずにフォームにそのリクエストのステータスを通知する方法がわかりません

これで Demo 2つのことを制御するためにredux-sagaFormikと一緒に使用しています:

  1. ファイルをエンドポイントにPOSTingするためのAPI呼び出し。
  2. uploadingフラグは、ユーザーがファイルのアップロードを待機している間、UIを制御します

reduxuploadingのみを処理しますが、残りの値はformikおよびredux-sagaによって処理されるため、より良いuser-experience(ユーザーはUIで何が起こっているかを示すuploadingインジケーターを持っています)とdeveloper-experience(応答をyieldingすることにより、サガの実行フローを制御しています)。

3
jank