reactjs - Wie man einen Klassendienst in React Native verwendet

Ich komme aus der Angular-Welt, in der ich einen Service mit Methoden und Eigenschaften haben kann. Dann kann ich diese Klasse in einer anderen Datei importieren, sie im Konstruktor injizieren und die Mitglieder der Klasse aufrufen. Jetzt arbeite ich an einer mobilen App mit React Native und Expo. Ich frage mich, ob ich dieselbe Abhängigkeitsinjektion durchführen kann.

Das ist, was ich bisher habe:

// HttpService.ts

import....

export default class HttpService{
  private field = "";
  public method1 = () => {}
  public method2 = () => {}
  private otherMethod = () => {}
}

Verwendung aus der Komponente:

// MakeApiCall.tsx
import HttpService from "./services/HttpService";
     
export...
// HttpService.method1 is not available.

Ich möchte nicht bei jedem Aufruf der Mitglieder der Klasse eine neue Instanz von HttpService erstellen.

Antwort #1

Sie können eine einzelne Instanz dieser Klasse exportieren:

// HttpService.ts
import....

class HttpService {
  private field = "";
  public method1 = () => {}
  public method2 = () => {}
  private otherMethod = () => {}
}

const singleton = new HttpService();
export default singleton;

// MakeApiCall.tsx
import HttpService from "./services/HttpService";
     
HttpService.method1();

Antwort #2

Wenn man von Angular kommt, gibt es eine Veränderung in der Art und Weise, wie Daten und Komponenten miteinander kommunizieren. Anstatt einen Service zu injizieren, bevorzugt React kleine zusammensetzbare Funktionen in Form von Hooks. Sie können auf den ersten Blick ziemlich komplex erscheinen, aber sie sind sehr angenehm zu verwenden, sobald man sie lernt.

Kurz gesagt, anstatt einen HTTP-Dienst zu erstellen, wäre es wahrscheinlich besser, für jede Methode einen Hook zu erstellen, unter Verwendung eines getesteten fetch-Frameworks. Hooks können unabhängig getestet werden und Logik teilen, wie folgt:

import useFetch from 'react-fetch-hook';

export function useMethod1() {
  return useFetch('/api/data1');
}

export function useMethod2() {
  return useFetch('/api/data2');
}

// Usage

import {useMethod1, useMethod2} from '../hooks/data';

export function Display() {

  const { isLoading, data, error } = useMethod1();

  if (error) return <p>{{error}}</p>;

  if (isLoading) return <p>Loading...</p>;

  return <ul>{{data.map(d => (<li>{{d}}</li>))}}</ul>;

}

Wenn Sie darauf bestehen, Dienste zu nutzen, könnte Ihnen dieser Artikel von LogRocket helfen, den Anwendungsfall, an dem Sie arbeiten, zu adressieren.