Reactアプリケーションにサービスを追加する質問する

Question

Angular サービスはコンテキストに依存しない一連のメソッドを提供するオブジェクトにすぎないと理解すると、問題は非常に簡単になります。複雑に見えるのは、Angular DI メカニズムだけです。DI はインスタンスの作成と維持を自動で処理するため便利ですが、実際には必要ありません。

おそらく聞いたことがある、axios という人気の AJAX ライブラリを考えてみましょう。

import axios from "axios";
axios.post(...);

これはサービスとして動作しませんか? 特定のロジックを担当する一連のメソッドを提供し、メインコードからは独立しています。

あなたの例は、入力を検証するための独立した一連のメソッドを作成することに関するものでした (例: パスワードの強度をチェックする)。一部の人は、これらのメソッドをコンポーネント内に配置することを提案しましたが、私にとっては明らかにアンチパターンです。検証に XHR バックエンド呼び出しの作成と処理、または複雑な計算の実行が含まれる場合はどうでしょうか。このロジックをマウスクリックハンドラーやその他の UI 固有のものと混在させますか。ナンセンスです。コンテナー/HOC アプローチでも同じです。値に数字が含まれているかどうかを確認するメソッドを追加するためだけにコンポーネントをラップするのですか。冗談でしょう。

たとえば、「ValidationService.js」という名前の新しいファイルを作成し、次のように整理します。

const ValidationService = {
    firstValidationMethod: function(value) {
        //inspect the value
    },

    secondValidationMethod: function(value) {
        //inspect the value
    }
};

export default ValidationService;

次に、コンポーネントで次の操作を実行します。

import ValidationService from "./services/ValidationService.js";

...

//inside the component
yourInputChangeHandler(event) {

    if(!ValidationService.firstValidationMethod(event.target.value) {
        //show a validation warning
        return false;
    }
    //proceed
}

このサービスはどこからでも使用できます。検証ルールが変更された場合は、ValidationService.js ファイルのみに注目する必要があります。

他のサービスに依存する、より複雑なサービスが必要になる場合があります。この場合、サービスファイルは静的オブジェクトではなくクラスコンストラクターを返すため、コンポーネント内でオブジェクトのインスタンスを自分で作成できます。また、アプリケーション全体でサービスオブジェクトのインスタンスが常に 1 つだけ使用されるようにするために、単純なシングルトンを実装することを検討することもできます。

Answer 1