Partage de l'état entre deux composants non-parents-enfants dans React

React est une bibliothèque JavaScript pour la construction d'interfaces utilisateur. Sa nature déclarative rend la gestion de l'état de votre application facile et prévisible. Deux manières couramment utilisées pour partager l'état entre deux composants qui ne sont pas parent-enfant dans React sont l'utilisation de l'API Context et des bibliothèques de gestion d'état comme Redux.

Utilisation de l'API Context

L'API Context de React fournit un moyen de transmettre des données à travers l'arborescence des composants sans avoir à passer les props manuellement à chaque niveau. En d'autres termes, l'API Context permet à des composants de s'abonner à des changements de contexte sans passer par des composants intermédiaires.

Prenez ceci en compte comme un exemple:

import React, { createContext, useContext } from 'react';

const MyContext = createContext(defaultValue);

function MyComponent() {
    const myValue = useContext(MyContext);
    ...
}

Dans cet exemple, le composant MyComponent a accès à la valeur actuelle du contexte MyContext. Il "s'abonne" aux changements de cette valeur sans avoir à recevoir cette valeur via des props.

Utilisation d'une bibliothèque de gestion d'état

Une autre solution pour partager des états entre des composants qui ne sont pas parent-enfant est d'utiliser une bibliothèque de gestion de l'état comme Redux. Redux est une bibliothèque open-source JavaScript pour gérer et centraliser l'état de votre application.

Redux fournit un store qui tient à jour l'état de votre application. Ce store est accessible de partout dans votre application, vous permettant de lire l'état et dispatch des actions pour le modifier, indépendamment de l'arborescence de vos composants.

Voici un exemple de base utilisant Redux pour gérer l'état:

import { createStore } from 'redux';

function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

let store = createStore(counterReducer)

store.dispatch({ type: 'INCREMENT' })

Dans cet exemple, l'état est géré par une fonction counterReducer qui prend en compte différentes actions et modifie l'état en conséquence. L'état est accessible et modifiable de partout, ce qui permet de le partager facilement entre différents composants.

Il est important de noter que Reducx apporte beaucoup à une application et il n'est pas toujours nécessaire d'utiliser Redux (ou une bibliothèque similaire) pour gérer l'état de votre application. Pour les petites applications ou les applications avec un flux de données simple, l'utilisation des hooks d'état et de l'API Context de React peut être suffisante.