React Reduxコンポーネントから非同期APIを呼び出す必要がありますか?(それに対する新しい見方)

ケイビー

私はこの質問が以前に尋ねられ、このトピックがReduxコミュニティで広く議論されていることを理解していますが、この角度でアプローチされているのを見たことがありません:エラーメッセージ

React + Redux +一部のミドルウェア(redux-promiseおよびredux-thunk)を使用するほとんどの例では、外部API呼び出しはアクションクリエーター内で行われます。API呼び出しの結果は、成功ケースまたはエラーケースでアプリケーションの状態に影響を与えます

私の反論:

API呼び出しの結果の主な関係者はコンポーネントです。これは、特にユーザーにエラーメッセージを表示する必要があるためです。エラーメッセージは、コンポーネントの状態として設定するのが最適です。で「クリーンアップ」する方が簡単componentWillMountです。アプリケーションレベルのエラー状態をクリーンアップするためだけにアクションを作成する必要はありません。

すべてのAPI呼び出しはコンポーネントから行う必要があり、呼び出すアクション作成者を決定する必要があります。その後、アクションクリエーターは、オブジェクトを返す関数になります。それらに副作用はありません。

繰り返しになりますが、この「テイク」は、ほとんどの場合、コンポーネントがエラーメッセージを処理する必要があるという事実に基づいていることを強調します。では、APIを呼び出して、その場でエラーに対処してみませんか?うまくいきます。アクションクリエーターに電話してください。物事が悪くなり、エラーが表示されます。また、アプリケーション全体でAPI呼び出しが重複することはないと思います。結局のところ、Reactはデータのモジュール化とトップダウンフローを強制しようとします。2つの異なるコンポーネントが実際に同じAPIを呼び出すべきではありません。彼らは同じアクションクリエーターを呼び出すことができますが、それは問題ありません。サインアップしてサインインすることを考えてください。さまざまなAPIエンドポイント。同じ最終状態(authenticated: true

とにかく、これは私の見解です。コンポーネント内のAPI呼び出しが良いアイデアであれば、経験豊富な人が答えてくれることを願っています。ありがとうございました。

編集:メディアでこの投稿作成しました、うまくいけば私の議論をよりよく説明します

ZekeDroid

ちょっとオープンすぎて「解決策」を思い付くことができませんでしたが、ここに簡単な答えがあります。

まず、クリーンアップが簡単だとはどういう意味componentWillMountですか?多くの場合、API呼び出しは、サインアップまたはログインコンポーネントなどのすでにマウントされているコンポーネントで実行されます。API呼び出しは、ボタンがマウントされたときではなく、ボタンがクリックされたときに発生します。

また、API呼び出しがReactコンポーネントの外部で行われる主な理由(reduxのようなデータ処理フレームワークがあると仮定)は、ライブラリがビューレイヤーとして使用されるためです。コンポーネントは、アプリケーションの状態を宣言的に反映するHTMLをレンダリングします。ログインAPI呼び出しが認証に失敗すると、アプリケーションの状態が変化し、その結果、ビューが変化します。コンポーネントでAPI応答の処理を開始すると、非同期状態の問題が発生する可能性があります。

たとえば、ユーザーが間違った資格情報で10回ログインすると、「ロックアウト」されます。そのエラーをどのように処理しますか?これらのエラーを処理するためのロジックを追加する可能性があります。そして、アプリの他の部分がこのエラーに対応する必要がある場合はどうなりますか?これで、これらのエラーに基づいてアクションを実行し始め、基本的に、コンポーネントに存在するアクションクリエーターから完全にAPI呼び出しを行うことに戻ります。

現在、これは主に大規模なアプリケーションに適用されます。アプリケーションが十分に小さく、reduxのような状態管理フレームワークが肥大化を追加するだけの場合、コンポーネントでAPI呼び出しを処理することは完全に合理的です。ただし、大規模なアプリケーションの場合は、アクションクリエーターにAPIロジックを保持することを強くお勧めします。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

Related 関連記事

ホットタグ

アーカイブ