Basit bir atomik model kullanarak React'te Paylaşılan Küresel Durumlar oluşturmanın en basit yolu. Bu blogda kütüphanenin kullanım ve uygulama detaylarını bulacaksınız.

kullanım

Küresel durumunuzu oluşturun

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

Neden Bağlam API'sini React Etmiyorsunuz?

Bildiğimiz gibi React Context, herhangi bir alt bileşende paylaşılan durum değiştiğinde her alt öğeyi yeniden işler, dolayısıyla bazı durumlarda fazladan yeniden işleme ve performans sorunlarına neden olur.

Motivasyon

redux , jotai , vb. gibi bu harici merkezi durum kitaplıklarının nasıl çalıştığını her zaman merak etmişimdir . Görünüşe göre, tepkinin tek yönlü akışından tamamen izole edilmiş bu harici merkezi depoları yaratmalarına izin veren bir tür süper güç kullanıyorlar.

Ve devasa kaynak kodlarını inceledikten sonra anahtarı buldum. Tepki bilgimin genişliğini gerçekten genişleten tek şey.

useGState'in Temel Fikri — Nasıl çalışır?

React'in useState()'in ayarlayıcı işlevi veya useReducer()'ın gönderme işlevi gibi durum ayarlayıcı işlevleri, tepkinin tek yönlü akışının dışındaki durumlara erişebilir/değiştirebilir.

Basit bir ifadeyle, bu temel fikri kullanarak normal js işlevlerindeki tepki durumuna erişebilir/değiştirebiliriz. Artık bu işlevleri kullanarak harici bir merkezi küresel mağaza oluşturabiliriz.

Geri kalan her şey basit. Bu küresel mağaza durumu değişikliklerine abone olmak için pub-sub gibi bir senkronizasyon mekanizması uygulamanız yeterlidir .

useGState, geliştiricilerin tepkileri derinlemesine anlamalarını sağlayan bir eğitim paketidir.

Bu bilgileri yararlı bulursanız, bu tür içerikler için LinkedIn'de benimle bağlantı kurun.