La forma más sencilla de crear estados globales compartidos en React utilizando un modelo atómico simple. En este blog, encontrará los detalles de uso e implementación de la biblioteca.

Uso

Crea tu estado 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>
  )
}

¿Por qué no reaccionar API de contexto?

Como sabemos, React Context vuelve a renderizar a cada elemento secundario cada vez que cambia el estado compartido en cualquier componente secundario, lo que provoca renderizaciones adicionales y problemas de rendimiento en algunos casos.

Motivación

Siempre he tenido curiosidad acerca de cómo funcionan estas bibliotecas estatales centrales externas como redux , jotai , etc. Parece que están usando algún tipo de superpoder que les permite crear estas tiendas centrales externas, que están completamente aisladas del flujo unidireccional de React.

Y después de revisar sus códigos fuente masivos, encontré la clave. Lo único que realmente amplía la amplitud de mi conocimiento de reacción.

Idea clave de useGState: cómo funciona.

Las funciones de establecimiento de estado de React, como la función de establecimiento de useState() o la función de envío de useReducer(), pueden acceder/modificar estados fuera del flujo unidireccional de React.

En palabras simples, podemos acceder/modificar el estado de reacción en funciones js normales usando esta idea clave. Ahora podemos crear una tienda global central externa usando estas funciones.

Descansa todo es simple. Simplemente implemente un mecanismo de sincronización como pub-sub para suscribirse a los cambios de estado de esta tienda global.

useGState es un paquete educativo que permite a los desarrolladores comprender y reaccionar en profundidad.

Si encuentra útil esta información, conéctese conmigo en LinkedIn para obtener más contenido de este tipo.