Redux-da selektorleri almak

Käwagt programmadan artykmaç kody aýyrmak we maglumatlary inkapsulirlemek örän peýdalydyr.

Geliň önümleriňiziň programmany açalyň. Programmanyň birnäçe ýerinde selektorlary ulanmak bilen, ýagny, alyp biler ýaly, birentek önümleri alyp, şol ýerde käbir hereketleri ýerine ýetirmek.

Indi bolsa, biz özümiziň productsSlice.js faylymyzy açarys, faylyň ahyryna çenli aşak düşeris we käbir kod setirlerini goşarys, şol ýerde iki selektor ýazyşdyrarys we olary eksport ederis. Bir funksiýa biziň ähli önümleri almak üçin bolar:

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

Soňra bolsa ikinjisi - id-e görä bir önümi almak üçin:

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

Elbetde, sizde adalatly sorag ýüze çykyp biler: state.products.products nireden geldi? Jogaby ýönekeý, öňki sapakda biz slaysyň gurluşyny üýtgetdik we indi önümlerimiz slaysyň aýratyn häsiýeti products-içinde massiw görnüşinde bolar önümler slaysy state.products (ýadyňyzda bolsy ýaly, bu ýerde state - bu Redux-yň kök ýagdaý obýekti, hemme slayslary öz içine alýar).

Şeýlelik bilen, biz ýöne selektor-funksiýalar üçin kody bir ýere programmanyň içine geçirdik we indi biz olaryň ulanylan ýerlerinde degişli üýtgeşmeleri girizmeli. ProductsList.jsx faylyndan başlalyň. Onda selectAllProducts import edeliň, sebäbi bu ýerde bize ähli önümleri almak gerek bolar:

import { selectAllProducts } from './productsSlice'

We ProductsList funksiýasynyň kodunyň başynda, çalyşarys:

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

Şu setire:

const products = useSelector(selectAllProducts)

Indi bolsa, ProductPage.jsx faylyna geçeliň. Bu ýerde bize id-e görä önüm gerekdi. Setiri çalyşdyryň (importy ýatdan çykarmaň):

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

Şuňa:

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

EditProductForm.jsx faylynda özüňiz şuňa meňzeş çalyşdyrmany ediň. Bu ýerde bize hem şonuň ýaly id-e görä önüm gerek.

Ýadyňyzda bolsun, şu optimizasiýa diňe siziň amatlygyňyz üçin we siz ony gerekli we amatly hasap eden wagtyňyzda edip bilersiňiz. Bizimiň mysalymyzda bolsa, gowy göz öňüne getiriň, biz selektor-funksiýanyň koduny her gezek dürli ýerlerde ýazýan bolduk, soňra bolsa ýagdaýyň gurluşyny üýtgetdik, we şonda hemme komponentlerde ony düzetmeli boldy.

Talyp programmanyňyzy açyň. Onda studentsSlice.js faylyny açyň. Faylyň iň aşagynda, sapakda görkezilişi ýaly, iki selektor ýazyň we eksport ediň: ähli talyplary almak üçin selectAllStudents we bir talyby id-e görä almak üçin selectStudentById.

Indi selectAllStudents we selectStudentById selektorlaryny StudentsList.jsx, StudentPage.jsx we EditStudentForm.jsx faylaryna import ediň, bu fayllarda sapakda görkezilişi ýaly degişli üýtgeşmeleri giriziň.