Redux Toolkit Query, veri yönetimi çalışmalarınızın çoğunu ortadan kaldırabilir. Nasıl olduğunu keşfedin.

React, web uygulamaları için kullanıcı arayüzleri oluşturmaya yönelik popüler bir JavaScript kitaplığıdır. Bir uygulama oluştururken, kullanıcı etkileşimlerine yanıt olarak verileri tarayıcıda uygun şekilde alıp işlemenizi sağlamak için verimli bir veri yönetimi yaklaşımı dikkate almak önemlidir.

Ancak, özellikle birden fazla kaynaktan veri alıyorsanız ve birkaç durumu sürekli olarak güncellemeniz gerekiyorsa, bu süreci yönetmek görünüşte sıkıcı ve hataya açık bir görev haline gelebilir. Bu gibi durumlarda, Redux Toolkit Query verimli bir çözüm sunar.

Redux Araç Seti Sorgusu (RTK Sorgusu), Redux Toolkit'in üzerine inşa edilmiş bir veri alma aracıdır. Resmi belgeleri, RTK Sorgusunu "basitleştirmek için tasarlanmış güçlü bir veri alma ve önbelleğe alma aracı" olarak tanımlar. Bir web uygulamasında veri yüklemek için yaygın durumlar, veri getirme ve önbelleğe alma mantığını elle yazma ihtiyacını ortadan kaldırır kendin".

instagram viewer

Temel olarak, API'lerden veya bir React uygulamasından başka herhangi bir veri kaynağından veri alma ve yönetme sürecini kolaylaştıran bir dizi özellik ve yetenek sağlar.

Redux Toolkit Query ile React Query arasında benzerlikler olsa da, Redux Toolkit Query'nin ana avantajlarından biri, Redux, bir devlet yönetimi kütüphanesi, birlikte kullanıldığında React uygulamaları için eksiksiz bir veri alma ve durum yönetimi çözümü sağlar.

RTK'nın temel özelliklerinden bazıları, verileri önbelleğe alma, bir sorgu yönetimi özelliği ve hata işlemeyi içerir.

Başlamak için, yerel olarak bir React projesini hızlı bir şekilde başlatabilirsiniz. React Uygulaması Oluştur emretmek.

mkdir Tepki-RTQ
cd Tepki-RTQ
npx oluşturma-tepki-uygulama tepki-rtq-örnek
cd tepki-rtq-örnek 
Npm başlangıç

Alternatif olarak, Vite kullanarak bir React projesi oluşturun, web uygulamaları için yeni bir derleme aracı ve geliştirme sunucusu.

Bu projenin kodunu burada bulabilirsiniz. GitHub deposu.

Gerekli Bağımlılıkları Kurun

React projenizi hazır ve çalışır hale getirdikten sonra devam edin ve aşağıdaki paketleri kurun.

npm install @reduxjs/toolkit tepki-redux

Bir API Dilimi tanımlayın

Bir API dilimi, belirtilen API uç noktalarıyla entegrasyon ve etkileşim için gerekli Redux mantığını içeren bir bileşendir. Verileri almak için sorgu uç noktalarını ve verileri değiştirmek için mutasyon uç noktalarını tanımlamanın standartlaştırılmış bir yolunu sağlar.

Temel olarak, bir API dilimi, belirli bir kaynaktan veri istemek ve verilerde değişiklik yapmak için uç noktaları tanımlamanıza izin vererek API'lerle entegrasyon için kolaylaştırılmış bir yaklaşım sağlar.

İçinde kaynak dizini, yeni bir klasör oluşturun ve adlandırın, özellikler. Bu klasörün içinde yeni bir dosya oluşturun: apiSlice.js, ve aşağıdaki kodu ekleyin:

içe aktarmak { createApi, fetchBaseQuery } itibaren"@reduxjs/toolkit/query/react";
ihracatsabit ürünlerApi = oluşturApi({
 redüktörYolu: "ürünlerAp",
 temel Sorgu: FetchBaseQuery({ temelUrl: " https://dummyjson.com/" }),


 uç noktalar: (inşaatçı) => ({
 getAllProducts: builder.query({
 sorgu: () =>"ürünler",
 }),
 getProduct: builder.query({
 sorgu: (ürün) =>`ürünler/arama? q=${ürün}`, 
 }),
 }),
});
ihracatsabit { useGetAllProductsQuery, useGetProductQuery } = productsApi;

Bu kod, adlı bir API dilimini tanımlar. ürünlerApi Redux Toolkit'i kullanarak api oluştur işlev. API dilimi aşağıdaki özellikleri alır:

  • A indirgeyiciYol özellik - Redux deposundaki indirgeyicinin adını ayarlar.
  • bu temel Sorgu özelliği - kullanan tüm API istekleri için temel URL'yi belirtir. FetchBaseQuery Redux Toolkit tarafından sağlanan işlev.
  • API uç noktalar - kullanarak bu API dilimi için kullanılabilir uç noktaları belirtin. inşaatçı nesne. Bu durumda, kod iki bitiş noktası tanımlar.

Son olarak, iki kanca üretilir ürünlerAPI iki uç noktayı tanımlayan nesne. API istekleri yapmak, verileri almak ve kullanıcının etkileşimine yanıt olarak durumu değiştirmek için bu kancaları çeşitli React bileşenlerinde kullanabilirsiniz.

Bu yaklaşım, React uygulamasında durum yönetimini ve veri getirmeyi kolaylaştırır.

Redux Store'u yapılandırın

RTK Sorgusu, verileri API'den aldıktan sonra Redux deposundaki verileri önbelleğe alır. Bu durumda mağaza, React'ten yapılan API isteklerinin durumunu yönetmek için merkezi bir merkez görevi görür. Uygulama, bileşenlerin bu verilere erişmesini ve güncellenmesini sağlayan API isteklerinden alınan veriler dahil olmak üzere gerekli.

src dizininde bir mağaza.js dosyasını açın ve aşağıdaki kod satırlarını ekleyin:

içe aktarmak { yapılandırma Mağazası } itibaren"@reduxjs/araç seti";
içe aktarmak { ürünlerApi } itibaren"./özellikler/apiSlice";
ihracatsabit mağaza = yapılandırmaMağazası({
 redüktör: {
 [productsApi.reducerPath]: productsApi.reducer,
 },
 ara yazılım: (getDefaultAra Yazılım) =>
 getDefaultMiddleware().concat (productsApi.middleware),
});

Bu kod, iki ana yapılandırma parçasıyla yeni bir Redux mağazası oluşturur:

  1. redüktör: Bu, mağazanın durum güncellemelerini nasıl işlemesi gerektiğini tanımlar. bu durumda, ürünlerApi.reducer redüktör işlevi olarak iletilir ve mağazanın genel durumu içinde onu tanımlaması için benzersiz bir redüktörPath anahtarı verilir.
  2. Ara yazılım: Bu, mağazaya uygulanması gereken ek ara yazılımları tanımlar.

Sonuç mağaza nesne, uygulamanın durumunu yönetmek için kullanılabilen, tamamen yapılandırılmış bir Redux deposudur.

Uygulama, mağazayı bu şekilde yapılandırarak API isteklerinin durumunu kolayca yönetebilir ve Redux Toolkit'i kullanarak sonuçlarını standart bir şekilde işleyebilir.

RTK İşlevselliğini Uygulamak için Bir Bileşen Oluşturun

src dizininde yeni bir tane oluşturun. bileşenler içinde yeni bir dosya bulunan klasör: veri.js.

Bu kodu Data.js dosyasına ekleyin:

içe aktarmak { useGetAllProductsQuery } itibaren"../özellikler/apiSlice";
içe aktarmak Tepki, { useState } itibaren"tepki";
içe aktarmak"./product.component.css";
ihracatsabit veri = () => {
sabit { data, error, isLoading, refetch } = useGetAllProductsQuery();
sabit [productsData, setProductsData] = useState([]);


sabit handleDisplayData = () => {
 yeniden getir();
 setProductsData (veri?.ürünler);
 };
geri dönmek (
"ürün kabı">

Bu kod, belirtilen API uç noktasından veri almak için API dilimi tarafından sağlanan useGetAllProductsQuery kancasını kullanan bir React bileşenini gösterir.

Kullanıcı Verileri Görüntüle düğmesine tıkladığında, ürün verilerini almak için API'ye bir HTTP isteği göndererek handleDisplayData işlevi yürütülür. Yanıt alındığında, ürünlerin veri değişkeni yanıt verileriyle güncellenir. Son olarak bileşen, ürün ayrıntılarının bir listesini oluşturur.

Uygulama Bileşenini Güncelleyin

App.js dosyasındaki kodda aşağıdaki değişiklikleri yapın:

içe aktarmak"./Uygulama.css";
içe aktarmak { Veri } itibaren"./bileşenler/Veri";
içe aktarmak { mağaza } itibaren"./mağaza";
içe aktarmak { Sağlayıcı } itibaren"tepki redux";
içe aktarmak { Api Sağlayıcı } itibaren"@reduxjs/toolkit/query/react";
içe aktarmak { ürünlerApi } itibaren"./özellikler/apiSlice";
işlevUygulama() {
geri dönmek (


"Uygulama">

 </div>
 </ApiProvider>
 </Provider>
 );
}
ihracatvarsayılan Uygulama;

Bu kod, Veri bileşenini iki sağlayıcıyla sarar. Bu iki sağlayıcı, bileşene Redux deposuna erişim izni verir ve RTK Sorgu özelliklerine API'den veri alıp görüntülemesine izin verir.

Redux Toolkit Query'yi minimum kodla belirli bir kaynaktan verimli bir şekilde veri almak için yapılandırmak kolaydır. Ayrıca, API dilimi bileşeninde mutasyon bitiş noktaları tanımlayarak saklanan verileri değiştirmek için işlevleri dahil edebilirsiniz.

Redux'un özelliklerini RTK'nın veri getirme yetenekleriyle birleştirerek, React web uygulamalarınız için kapsamlı bir durum yönetimi çözümü elde edebilirsiniz.