Redux'ta Seçici Alıcıların Elde Edilmesi

Bazen bir uygulamadaki gereksiz koddan kurtulmak ve aynı zamanda verileri kapsüllemek çok faydalıdır.

Hadi ürün uygulamamızı açalım. Dikkat edin, uygulamanın birkaç yerinde, bazı işlemler yapmak için seçicileri kullanarak ürün dilimini çıkarıyoruz.

Şimdi ise productsSlice.js dosyamızı açacağız, dosyanın en sonuna inip birkaç satır kod ekleyeceğiz, burada iki seçici yazıp dışa aktaracağız. Fonksiyonlarımızdan biri tüm ürünleri almak için olacak:

export const selectAllProducts = (state) => state.products.products

Ve ondan sonra ikincisi - id'ye göre tek bir ürün almak için:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

Tabii ki aklınıza şu adil soru gelebilir - bu state.products.products karmaşası nereden geliyor? Cevap basit, geçen derste dilimimizin yapısını değiştirdik ve artık ürünlerimiz, ürünler dilimi state.products içinde ayrı bir products özelliğinde bir dizi olarak bulunacak (unutmayın ki buradaki state, tüm Redux dilimlerini içeren kök Redux state nesnesidir).

Böylece, seçici fonksiyonlar için olan kodu uygulamada tek bir yere taşımış olduk ve şimdi onları kullandığımız yerlerde ilgili değişiklikleri yapmamız gerekiyor. ProductsList.jsx dosyasından başlayalım. Buraya selectAllProducts'ı içe aktaralım, çünkü burada tüm ürünleri almamız gerekecek:

import { selectAllProducts } from './productsSlice'

Ve ProductsList fonksiyonunun başındaki kodda, şunu değiştirelim:

const products = useSelector((state) => state.products)

Şu satırla:

const products = useSelector(selectAllProducts)

Şimdi ise ProductPage.jsx dosyasına geçelim. Burada bize id'ye göre bir ürün gerekiyordu. Satırı değiştirelim (içe aktarmayı unutmayın):

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Şununla:

const product = useSelector((state) => selectProductById(state, productId))

Benzer bir değişikliği EditProductForm.jsx dosyasında kendiniz yapın. Burada da bize id'ye göre bir ürün gerekiyor.

Unutmayın, böyle bir optimizasyon sadece sizin rahatınız içindir ve bunu gerekli ve uygun gördüğünüz zaman yapabilirsiniz. Örneğimizde ise, seçici fonksiyonunun kodunu her seferinde farklı yerlerde yazdığımızı ve sonra state yapısını değiştirdiğimizde, onu tüm bileşenlerde düzeltmek zorunda kalacağımızı hayal edin.

Öğrenci uygulamanızı açın. İçinde studentsSlice.js dosyasını açın. Dosyanın en altında, derste gösterildiği gibi, tüm öğrencileri almak için selectAllStudents ve id'ye göre tek bir öğrenci almak için selectStudentById olmak üzere iki seçici yazın ve dışa aktarın.

Şimdi selectAllStudents ve selectStudentById seçicilerini StudentsList.jsx, StudentPage.jsx ve EditStudentForm.jsx dosyalarına içe aktarın, bu dosyalarda derste gösterildiği gibi ilgili değişiklikleri yapın.