სელექტორების მიღება Redux-ში

ზოგჯერ ძალიან სასარგებლოა აპლიკაციიდან ზედმეტი კოდის მოშორება ასევე მონაცემების ინკაფსულაცია.

მოდით გავხსნათ ჩვენი აპლიკაცია პროდუქტებით. ყურადღება მიაქციეთ, რომ აპლიკაციის რამდენიმე ადგილას ჩვენ, სელექტორების გამოყენებით, ვიღებთ პროდუქტების სლაისს, რომ რაიმე მოქმედება შევასრულოთ მასთან.

ახლა კი გავხსნით ჩვენი productsSlice.js ფაილი, ჩავალთ ფაილის ბოლოში და დავამატებთ რამდენიმე სტრიქონს კოდს, სადაც დავწერთ ორ სელექტორს და ექსპორტს გავუკეთებთ მათ. ერთი ფუნქცია იქნება ყველა პროდუქტის მისაღებად:

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

და მის შემდეგ მეორე - ერთი პროდუქტის მისაღებად id-ით:

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

რა თქმა უნდა, შეიძლება გაგიჩნდეს გონივრული კითხვა - საიდან გვაქვს ასეთი კონსტრუქცია: state.products.products? პასუხი მარტივია, ჩვენ ბოლო გაკვეთილზე შევცვალეთ სლაისის სტრუქტურა და ახლა ჩვენი პროდუქტები მასივის სახით იქნება ცალკე პროპერთი products-ში, პროდუქტების სლაისის state.products (გახსოვდეთ, რომ აქ state არის Redux-ის მთავარი ობიექტი მდგომარეობის, რომელიც შეიცავს ყველა სლაისს).

ამ გზით ჩვენ უბრალოდ გადმოვიტანეთ კოდი ფუნქციები-სელექტორებისთვის ერთ ადგილას აპლიკაციაში და ახლა ჩვენ უნდა შევიტანოთ შესაბამისი ცვლილებები იქ, სადაც მათ გამოვიყენეთ. დავიწყოთ ფაილით ProductsList.jsx. იმპორტი გავუკეთოთ მას selectAllProducts, რადგან აქ ჩვენ დაგვჭირდება ყველა პროდუქტის მიღება:

import { selectAllProducts } from './productsSlice'

და ProductsList ფუნქციის კოდის დასაწყისში, შევცვალოთ:

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

ამ სტრიქონზე:

const products = useSelector(selectAllProducts)

ახლა კი გადავიდეთ ფაილზე ProductPage.jsx. აქ ჩვენ გვჭირდებოდა პროდუქტი id-ით. გავაკეთოთ შეცვლა სტრიქონის (არ დაგავიწყდეთ იმპორტი):

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

ამაზე:

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

თავად გააკეთეთ მსგავსი შეცვლა ფაილში EditProductForm.jsx. აქ ჩვენ ასევე გვჭირდება პროდუქტი id-ით.

გახსოვდეთ, რომ ასეთი ოპტიმიზაცია მხოლოდ თქვენი მოხერხებულობისთვისაა და თქვენ შეგიძლიათ გააკეთოთ ის მაშინ, როცა მიგაჩნიათ საჭიროდ და მოხერხებულად. ჩვენს მაგალითზე კი წარმოიდგინეთ, რომ ჩვენ დაგვეწერა სელექტორის ფუნქციის კოდი ყოველ ჯერზე სხვადასხვა ადგილას, და შემდეგ შეგვეცვალა სთეიტის სტრუქტურა, და მაშინ მოგვიწევდა მისი შესწორება ყველა კომპონენტში.

გახსენით თქვენი აპლიკაცია სტუდენტებით. გახსენით მასში ფაილი studentsSlice.js. ფაილის ბოლოში დაწერეთ და ექსპორტი გაუკეთეთ, როგორც ნაჩვენებია გაკვეთილზე, ორი სელექტორი ყველა სტუდენტის მისაღებად selectAllStudents და ერთი სტუდენტის მისაღებად id-ით selectStudentById.

ახლა იმპორტი გაუკეთეთ selectAllStudents და selectStudentById ფაილებში StudentsList.jsx, StudentPage.jsx და EditStudentForm.jsx, შეიტანეთ ამ ფაილებში შესაბამისი ცვლილებები, როგორც ნაჩვენებია გაკვეთილზე.