Partage de l’état entre les modules frontaux

En général, l’état dans les applications React devrait être géré à l’aide de React . Utilisez le hook useState (ou useReducer) et Context  pour faire circuler l’état au sein de votre module frontal.

Dans certains cas, vous pouvez avoir besoin de gérer l’état en dehors de React, par exemple lorsque vous avez des applications React séparées qui doivent partager l’état. Cela peut se produire, par exemple, si votre module frontal a plusieurs extensions qui ont besoin de partager un état entre elles.

Dans ce cas, vous pouvez utiliser l’option @openmrs/esm-state de @openmrs/esm-framework. Le cadre fournit des fonctions pour gérer l’état en utilisant Zustand .

Utilisation

Un magasin Zustand peut être créé en utilisant createGlobalStore:

import { createGlobalStore } from "@openmrs/esm-framework";
 
export interface BooksStore {
  books: Array<string>;
}
 
export const bookStore = createGlobalStore<BooksStore>("books", {
  books: [],
});

Le magasin est alors accessible en utilisant getGlobalStore

import { getGlobalStore, subscribeTo } from "@openmrs/esm-framework";
 
const bookStore = getGlobalStore<BooksStore>("books");
console.log(bookStore.getState());
subscribeTo(bookStore, (state) => state.books, (books) => console.log(books));
bookStore.setState({ books: ["Pathologies du pouvoir"] });

Dans React:

import React from "react";
import { getGlobalStore, useStore } from "@openmrs/esm-framework";
 
const bookStore = getGlobalStore<BooksStore>("books");
 
function BookShelf() {
  const { books } = useStore(bookStore);
  return <>{books.join(",")}</>;
}

Il y a quelques autres façons d’utiliser les magasins dans React, par exemple en créant un abonnement dans un bloc useEffect, ou en utilisant Provider et connect, mais cette méthode est de loin la plus simple.

Autres notes

Si votre structure de répertoire le permet, vous pouvez aussi passer des magasins explicitement:

import { createGlobalStore } from "@openmrs/esm-framework";
 
export interface BooksStore {
  books: Array<string>;
}
 
export const bookStore = createGlobalStore<BooksStore>("books", {
  books: [],
});

import { bookStore } from "./bookStore";
bookStore.setState({ books: ["A History of Global Health"] });

Les global stores sont stockés en mémoire par défaut. Si un store doit survivre à un rafraîchissement du navigateur dans la même session d’onglet, passez "sessionStorage" comme troisième argument à createGlobalStore(). Le framework prend actuellement en charge les stores en mémoire et les stores adossés à sessionStorage.

Voir la documentation Zustand  pour plus d’informations sur les stores.