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 файлына көшейік. Мұнда bizge id бойынша өнім керек болды. Жолды ауыстырамыз (импортты ұмытпаңыз):

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

Мынаған:

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

EditProductForm.jsx файлында ұқсас ауыстыруды өзіңіз жасаңыз. Мұнда да бізге id бoyынша өнім керек.

Есіңізде болсын, мұндай оңтайландыру тек сіздің ыңғайлылығыңыз үшін және сіз оны қажет де ыңғайлы деп тапқан кезде жасай аласыз. Ал біздің мысалда, егер біз селектор функциясының кодын әр түрлі жерлерде әр уақытта жазсақ, сосын күй құрылымын өзгертсек, онда оны барлық компоненттерде түзетуге тура келетінін елестетіп көріңіз.

Студенттерімізбен жұмыс істейтін қолданбаңызды ашыңыз. Ондағы studentsSlice.js файлын ашыңыз. Файлдың ең төменгі жағында сабақта көрсетілгендей, барлық студенттерді алу үшін selectAllStudents және bir studentti id бойынша алу үшін selectStudentById екі селекторын жазып, экспорттаңыз.

Енді selectAllStudents және selectStudentById селекторларын StudentsList.jsx, StudentPage.jsx және EditStudentForm.jsx файлдарына импорттап, осы файлдарда сабақта көрсетілгендей сәйкес өзгерістер енгізіңіз.