reactjs - Zustand ile API çağrısı kullanarak fetch yapma useEffect en iyi uygulama

Bir useEffect fonksiyonunda Zustand ile bir API'den durum alırken, bunu yapmanın en iyi uygulaması nedir? Şu anda bunu çok basit bir şekilde kullanıyorum:

export interface ModeState{
  modes: Mode[];
  fetchModes: () => void;
}

export const useModeStore = create<ModeState>((set) => ({
  modes: [],
  fetchModes: async () => {
    const modes: AcquisitionMode[] = await API.get(`/acquisition-modes`);
    await set({ modes });
  },
}));

Bileşen render fonksiyonunda:

  const modeStore = useModeStore()
  const modes = modeStore.modes
  
  useEffect(() => {
    modeStore.fetchModes()
  }, [])

Bununla birlikte, dökümantasyon, özellikle mağazam daha fazla değer ve getirme fonksiyonlarıyla daha karmaşık hale gelirse, performans açısından daha verimli yazılabilecek birden fazla yol olabileceğini ima ediyor gibi görünüyor. Her API çağrısı için ayrı bir mağaza yapmak en iyi uygulama mıdır? Her bileşende sadece ihtiyacınız olan mağaza kısmını almak için dilimleri mi kullanmalısınız? Mağazayı useEffect içinde farklı şekilde mi kullanmalıyım? useEffect içinde mağazayı nasıl kullanmanız gerektiğine dair çevrimiçi olarak net bir örnek bulamıyorum. subscribe dökümantasyonu, mağazayı async bir fonksiyonla değerleri almak için kullandığınız durum için geçerli görünmüyor.

Cevap #1

Geçmişte zustand'ı benzer bir şekilde kullandım. Genellikle store üzerinde bir sync metodum olurdu ve bunu bir useEffect içinde çağırır, bileşene mevcut olan ve store'da olmayan herhangi bir state'i buna geçirirdim. Diğer bir olasılık da, veri çekmek için optimize edilmiş bir kütüphaneye veriyi aldırmak ve çekildikten sonra store'a sunmaktır.

Dokümantasyonun performansla ilgili olarak bahsettiği, sağlanan bir seçici ile mağazanızın bölümlerini gerçekten seçebileceğinizdir. Bu durumlarda, yeniden render yalnızca şu zaman gerçekleşecektir

  • önceki ve şu anda seçili olan değer farklıdır veya
  • Özel olarak sağlanan bir eşitlik fonksiyonu, önceki ve mevcut değerlerin farklı olduğunu belirtir.

Performansla ilgili daha detaylı bilgi almak istersen, bu makaleyi önerebilirim (uyarı, ben yazdım)

Yine de, bu performans düşünceleri, örneğin bir useEffect kancasından veri çekmeyi nasıl tetikleyeceğinizi pek etkilemez.

Cevap #2

Bir önerim var: async metodunuzu store'a koymayın, çünkü:

  • Zustand ile gerek yok
  • Mağazanız daha fazla kod satırına sahip ve daha az okunabilir

useEffect içinde bağımlılığı kaybettiniz, kullanmanız daha iyi olur

useEffect(() => useModeStore.getState().fetchModes(), [])

Ve önemli olan şey istek durumu. İki yolunuz var: her seferinde çok kod yazmak veya Zustand için üçüncü taraf bir kütüphane kullanmak. Size bu kütüphaneyi (Zustand Fetching Helpers) önerebilirim, istekleri yürütmek için ihtiyacınız olan her şeye sahip, store'u aşırı yüklemiyor ve birkaç ek yardımcı da içeriyor. Boilerplate'i tekrar tekrar azaltmak mümkün. Veya beğendiğiniz kısmı kopyalayabilirsiniz.

Örneğin, bu kütüphane ile kodunuz şöyle görünebilir:

export interface ModeState{
  modes: Mode[];
}

export const useModeStore = create<ModeState>((set) => ({
  modes: [],
}));
export cosnt useModeRequest = leitenRequest(useModeStore, "modes", async () => {
    return API.get(`/acquisition-modes`);
  });

ve bileşen:

const modes = useModeStore(state => state.modes)
const status = useModeRequest(state => state.status)
  
  useEffect(() => {
    useModeRequest.action()
  }, [])

return status === "loaded" ? <>content</>

genellikle durum ve içerik farklı bileşenler içinde olur, ama burada bir arada

İlgili makaleler