Najprostszy sposób tworzenia współdzielonych stanów globalnych w React przy użyciu prostego modelu atomowego. Na tym blogu znajdziesz szczegóły użycia i implementacji biblioteki.

Stosowanie

Stwórz swój stan globalny

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>
  )
}

Dlaczego nie React Context API?

Jak wiemy, React Context ponownie renderuje każde dziecko za każdym razem, gdy zmienia się współdzielony stan w jakimkolwiek komponencie potomnym, co w niektórych przypadkach powoduje dodatkowe ponowne renderowanie i problemy z wydajnością.

Motywacja

Zawsze byłem ciekawy, jak działają te zewnętrzne centralne biblioteki stanowe, takie jak redux , jotai itp. Wygląda na to, że używają jakiejś supermocy, która pozwala im tworzyć te zewnętrzne centralne magazyny, które są całkowicie odizolowane od jednokierunkowego przepływu reakcji.

Po przejrzeniu ich ogromnych kodów źródłowych znalazłem klucz. Jedyna rzecz, która naprawdę poszerza zakres mojej wiedzy o reakcjach.

Kluczowa koncepcja useGState — Jak to działa.

Funkcje ustawiające stan w React, takie jak funkcja ustawiająca w useState() lub funkcja wysyłająca w useReducer(), mogą uzyskiwać dostęp do/modyfikować stany poza jednokierunkowym przepływem React.

Mówiąc prościej, możemy uzyskać dostęp/zmodyfikować stan reakcji w normalnych funkcjach js, korzystając z tej kluczowej idei. Teraz możemy stworzyć zewnętrzny centralny magazyn globalny za pomocą tych funkcji.

Spoczywaj, wszystko jest proste. Po prostu zaimplementuj mechanizm synchronizacji, taki jak pub-sub, aby subskrybować te globalne zmiany stanu sklepu.

useGState to pakiet edukacyjny, który umożliwia programistom głębokie zrozumienie reakcji.

Jeśli uznasz te informacje za pomocne, skontaktuj się ze mną na LinkedIn , aby uzyskać więcej takich treści.