reactjs - Cum să folosești serviciul de clasă în React Native

Vin din lumea Angular unde pot avea un serviciu cu metode și proprietăți. Apoi pot importa această clasă într-un alt fișier, o pot injecta în constructor și pot apela membrii clasei. Acum lucrez la o aplicație mobilă cu React Native și Expo. Mă întreb dacă pot face aceeași injecție de dependență.

Acesta este ceea ce am până acum:

// HttpService.ts

import....

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

Utilizare din Componentă:

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

Nu vreau să inițializez o instanță de HttpService de fiecare dată când apelez membrii clasei.

Răspuns #1

Poți exporta o instanță singleton a acelei clase:

// 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();

Răspunsul #2

Venind din Angular există o schimbare în modul în care datele și componentele interacționează. În loc să injecteze un serviciu, React favorizează funcții mici și compozabile sub formă de hooks. Ele pot părea destul de complexe la început, dar sunt foarte plăcute de utilizat odată ce le înveți.

Pe scurt, în loc să creezi un serviciu HTTP, probabil ar fi mai bine să creezi un hook pentru fiecare metodă, folosind un framework fetch testat. Hook-urile pot fi testate independent și pot împărtăși logică, astfel:

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>;

}

Dacă ești hotărât să folosești servicii, atunci acest articol de la LogRocket ar putea ajuta la abordarea cazului de utilizare la care lucrezi.