1. Maak uw service.
Eerst moet je de service maken die je wilt injecteren en de klasse exporteren. Je moet de methoden in de klasse plaatsen die je nodig hebt.
```
class MijnService {
hello() {
return “Hallo wereld!”;
}
}
export default MijnService;
```
1. Maak een context.
Nu, maak een context waarin de service zal leven. Dit stelt u in staat om de service in te pakken en toegang te krijgen tot de kindcomponenten.
```
import React from ‘react’;
export const MijnServiceContext = React.createContext(null);
```
1. Maak uw Provider.
Uw provider wikkelt de componenten die afhankelijk zijn van de service. Het maakt de service beschikbaar voor die componenten.
```
import React from “react”;
import MijnService from “./mijnService”;
import { MijnServiceContext } from “./mijnServiceContext”;
const MijnServiceProvider = ({ children }) => { const mijnService = new MijnService();
return (export default MijnServiceProvider;
```
1. Wrap componenten die toegang nodig hebben tot de service.
Nu kunt u de provider gebruiken om componenten in te wikkelen waar u toegang wilt hebben tot de service.
```
```
1. Maak gebruik van de service.
Binnen de ingepakte componenten kun je de service in elke functie of effect die je wilt, hetzij via ‘useContext’ hook gebruiken.
```
import React, { useContext } from ‘react’;
import { MijnServiceContext } from ‘./mijnServiceContext’;
const MijnComponent = () => { const mijnService = useContext(MijnServiceContext);
const zegHallo = () => { console.log(mijnService.hello()); }; return ( ); };export default MijnComponent;
```
Dit zijn de stappen voor afhankelijkheidsinjectie in een react-app met behulp van context. In dit voorbeeld hebben we maar één service. Als je echter meerdere services hebt, zou je hetzelfde patroon volgen voor elke service.
