Le moyen le plus simple de créer des états globaux partagés dans React à l'aide d'un modèle atomique simple. Dans ce blog, vous trouverez les détails d'utilisation et de mise en œuvre de la bibliothèque.

Usage

Créez votre état global

import { gState } from 'usegstate'

const myGlobalState = gState('hello-world!')

import useGState from 'usegstate'

const YourAwesomeApp = () => {
  const [gState,setGState] = useGState(myGlobalState)
  return (
    <div>{gState}</div>
  )
}

import {GStateProvider} from 'usegstate'

const Wrapper = () => {
  return (
    <GStateProvider>
      <YourAwesomeApp />
    </GStateProvider>
  )
}

Pourquoi ne pas réagir à l'API contextuelle ?

Comme nous le savons, React Context restitue chaque enfant chaque fois que l'état partagé change dans n'importe quel composant enfant, ce qui provoque des rendus supplémentaires et des problèmes de performances dans certains cas.

Motivation

J'ai toujours été curieux de savoir comment fonctionnent ces bibliothèques centrales externes telles que redux , jotai , etc. Il semble qu'ils utilisent une sorte de superpuissance qui leur permet de créer ces magasins centraux externes, qui sont complètement isolés du flux unidirectionnel de React.

Et après avoir parcouru leurs énormes codes sources, j'ai trouvé la clé. La seule chose qui élargit vraiment l'étendue de mes connaissances en réaction.

Idée clé de useGState — Comment ça marche.

Les fonctions de définition d'état de React telles que la fonction de définition de useState() ou la fonction de répartition de useReducer() peuvent accéder/modifier des états en dehors du flux unidirectionnel de react.

En termes simples, nous pouvons accéder/modifier l'état de réaction dans les fonctions js normales en utilisant cette idée clé. Nous pouvons maintenant créer un magasin global central externe à l'aide de ces fonctions.

Reste tout est simple. Il suffit d'implémenter un mécanisme de synchronisation comme pub-sub pour s'abonner aux changements d'état de ce magasin global.

useGState est un package éducatif qui permet aux développeurs de comprendre réagir profondément.

Si vous trouvez ces informations utiles, contactez-moi sur LinkedIn pour plus de contenu de ce type.