0Pricing
React Academy · Ders

İyimser Güncellemeler ve Önbellek Geçersiz Kılma

Değişiklik sırasında arayüzü anında güncelleyin ve etiketlerle önbelleğe alınmış verileri geçersiz kılın.

İyimser Güncellemeler ve Önbellek Geçersiz Kılma, CoddyKit'te ücretsiz bir React Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, React Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. React Academy kursu toplamda 4 dersten oluşur.

Hoş Geldiniz

Bu derste RTK Sorgusu'nda değişiklik uç noktaları oluşturacak, iyimser güncellemelerle kullanıcı arayüzünü anında güncelleyecek ve etiketleri kullanarak güncelliğini yitirmiş önbellek girdilerini geçersiz kılacaksınız.

Değişiklik Uç Noktaları

builder.mutation() ile değişiklikler tanımlayın. Değişiklikler sunucudaki verileri değiştirir (POST, PUT, DELETE) ve bir useMutation kancası döndürür.
export const userApi = createApi({
  /* ... */
  endpoints: (builder) => ({
    updateUser: builder.mutation({
      query: ({ id, ...body }) => ({
        url: '/users/' + id,
        method: 'PUT',
        body,
      }),
    }),
  }),
});

Değişiklik Kancası Kullanma

Değişiklik kancasından [trigger, result] değerlerini ayırarak alın. Değişiklik argümanıyla trigger() işlevini çağırın. result; isLoading, isSuccess ve isError değerlerini içerir.
const [updateUser, { isLoading }] = useUpdateUserMutation();

const handleSave = async () => {
  await updateUser({ id: 1, name: 'Alice' });
};

Geçersiz Kılma için Önbellek Etiketleri

Etiketler, önbelleğe alınmış sorgu verilerini değişikliklere bağlar. Sorgularda `providesTags`, değişikliklerde `invalidatesTags` tanımlayın. Bir değişiklik çalıştırıldığında RTK Sorgusu, geçersiz kılınan etiketleri sağlayan tüm sorguları otomatik olarak yeniden getirir.
endpoints: (builder) => ({
  getUsers: builder.query({
    query: () => '/users',
    providesTags: ['User'],
  }),
  deleteUser: builder.mutation({
    query: (id) => ({ url: '/users/' + id, method: 'DELETE' }),
    invalidatesTags: ['User'],
  }),
})

Ayrıntılı Etiket Geçersiz Kılma

Ayrıntılı geçersiz kılma için id içeren etiket nesnelerini kullanın. getUser üzerinde belirli kullanıcının etiketini sağlayın ve updateUser üzerinde yalnızca o kullanıcının önbelleğini geçersiz kılın.
providesTags: (result, error, id) => [{ type: 'User', id }],
invalidatesTags: (result, error, { id }) => [{ type: 'User', id }]

onQueryStarted ile İyimser Güncellemeler

Sunucu yanıt vermeden hemen önce önbelleği güncellemek için bir değişiklikte onQueryStarted kullanın; ardından değişiklik başarısız olursa güncellemeyi geri alın.
updateUser: builder.mutation({
  query: (user) => ({ url: '/users/' + user.id, method: 'PUT', body: user }),
  async onQueryStarted(user, { dispatch, queryFulfilled }) {
    const patch = dispatch(
      userApi.util.updateQueryData('getUser', user.id, draft => {
        Object.assign(draft, user);
      })
    );
    try { await queryFulfilled; }
    catch { patch.undo(); } // roll back on error
  },
})

Bir Etiket Türünün Tüm Örneklerini Geçersiz Kılma

Liste sorgularında etiket olarak `{ type: 'User', id: 'LIST' }` kullanmak, tek tek kullanıcı girdilerini geçersiz kılmadan listenin tamamını geçersiz kılmanızı sağlar.
providesTags: result =>
  result ? [
    ...result.map(({ id }) => ({ type: 'User', id })),
    { type: 'User', id: 'LIST' },
  ] : [{ type: 'User', id: 'LIST' }]

Elle Önbellek Geçersiz Kılma

dispatch(api.util.invalidateTags(['User'])) ile belirli etiketleri program aracılığıyla geçersiz kılın. Bu, bileşenlerin dışında bulunan olay işleyicilerinde kullanışlıdır.
dispatch(userApi.util.invalidateTags(['User']));

Kötümser ve İyimser Güncellemeler

İyimser: Sunucu yanıt vermeden önce önbelleği günceller (anında kullanıcı arayüzü, hata durumunda geri alma). Kötümser: Sunucuyu bekler, ardından günceller (daha güvenli ama daha yavaş). Seçiminizi değişikliğin başarısız olma riskine göre yapın.

Etiketler ve Elle Yeniden Getirme Ne Zaman Kullanılır?

Tam olarak hangi sorguların geçersiz kılınacağını bildiğinizde etiketleri kullanın. Tek seferlik elle yenilemeler için bir sorgu kancasından `refetch()` işlevini kullanın. Büyük API'lerde etiketler daha otomatik ve ölçeklenebilirdir.

Hızlı Kontrol

RTK Sorgusu'nda bir değişiklik uç noktasındaki invalidatesTags ne yapar?

Özet

Değişiklikleri builder.mutation ile tanımlayın. Otomatik yeniden getirme için sorgularda providesTags, değişikliklerde invalidatesTags kullanın. İyimser güncellemeler için onQueryStarted ile updateQueryData, geri alma için undo() kullanın.

Kurs Tamamlandı

Tebrikler! **Redux Toolkit ve RTK Sorgusu** kursunu tamamladınız. Artık Redux dilimleri oluşturabilir, createAsyncThunk ile eşzamansız mantığı işleyebilir ve RTK Sorgusu'nun önbelleğe alma ile iyimser güncelleme özelliklerini kullanarak sunucu durumunu yönetebilirsiniz.

Sıkça Sorulan Sorular

“İyimser Güncellemeler ve Önbellek Geçersiz Kılma” dersi ücretsiz mi?

Evet — “İyimser Güncellemeler ve Önbellek Geçersiz Kılma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve React Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. React Academy kursu toplamda 4 dersten oluşur.

“İyimser Güncellemeler ve Önbellek Geçersiz Kılma” dersinde ne öğreneceğim?

Değişiklik sırasında arayüzü anında güncelleyin ve etiketlerle önbelleğe alınmış verileri geçersiz kılın. React Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

React Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te React Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.

“İyimser Güncellemeler ve Önbellek Geçersiz Kılma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu React Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her React Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

  1. Redux Toolkit Dilimleri ve createSlice
  2. createAsyncThunk ile Asenkron Mantık
  3. RTK Query: Uç Noktalar ve Otomatik Önbelleğe Alma
  4. İyimser Güncellemeler ve Önbellek Geçersiz Kılma
← React Academy Sayfasına Dön