Comment faire de l'injection de dépendances dans Reactjs ?

L’injection de dépendances n’est pas une fonctionnalité intégrée dans ReactJS comme elle l’est dans les frameworks Angular ou .NET. Cependant, nous pouvons réaliser quelque chose de similaire de différentes manières.

1. Utiliser Context API : Context fournit un moyen de transmettre des données à travers l’arbre de composants sans avoir à passer les props manuellement à tous les niveaux. Utilisez Contexte pour l’injection de dépendances en enveloppant l’application ou une partie de l’application dans un Provider.

```
import React, { createContext } from “react”;

export const DependencyContext = createContext();

export class DependencyProvider extends React.Component { constructor(props) { super(props);

this.state = { dependency: new Dependency(), }; } render() { return ( {this.props.children} ); } } ```

Puis, dans le composant où vous voulez utiliser la dépendance, vous pouvez la consommer.

```
import React from “react”;
import { DependencyContext } from “./DependencyProvider”;

class MyComponent extends React.Component { static contextType = DependencyContext;

render() { const dependency = this.context; return

{dependency.doSomething()}

; } } ```

1. Utiliser les Props :

Vous pouvez simplement passer les dépendances à travers les props.

```
const MyComponent = ({ dependency }) => dependency.doSomething();
```

1. Utiliser Higher-Order Components (HOC) :

Vous pouvez créer un composant d’ordre supérieur qui accepte un composant et renvoie ce composant avec les dépendances injectées.

```
const withDependency = (Component, dependency) => { return props => { return ; };
};
```

1. Utiliser Hooks personnalisés :

Vous pouvez également encapsuler la logique de votre dépendance dans un Hook personnalisé que vous pouvez utiliser dans n’importe quel composant fonctionnel.

```
import { useDependency } from ‘my-custom-hooks’;

const MyComponent = () => { const dependency = useDependency(); // …
}
```

Ces approches vous permettent de développer des composants plus isolés et plus faciles à tester.