Marrja e Selektorëve në Redux

Ndonjëherë është shumë e dobishme të heqësh qafe kodin e panevojshëm në aplikacion, si dhe të inkapsulosh të dhënat.

Le të hapim aplikacionin tonë me produktet. Kushtojini vëmendje faktit që në disa vende të aplikacionit ne, duke përdorur selektorë, nxjerrim slice-in me produkte për të kryer disa veprime me të.

Tani do të hapim productsSlice.js-ton, do të zbresim në fund të skedarit dhe do të shtojmë disa rreshta kodi, ku do të shkruajmë dy selektorë dhe do t'i eksportojmë ato. Një funksion do të jetë për marrjen e të gjitha produkteve:

products/productsSlice.jsexport const selectAllProducts = (state) => state.products.products

Dhe pas tij i dyti - për marrjen e një produkti sipas id:

products/productsSlice.jsexport const selectProductById = (state, productId) =>
  state.products.products.find((product) => product.id === productId)

Sigurisht mund të keni një pyetje të drejtë - nga na vjen një ndërtim i tillë: state.products.products? Përgjigjja është e thjeshtë, ne në mësimin e kaluar ndryshuam strukturën e slice-it dhe tani produktet tona do të gjenden në formë array në vetinë e veçantë products të slice-it të produkteve state.products (mbani mend se këtu state është objekti rrënjë i gjendjes së Redux, i cili përmban të gjitha slice-et).

Kështu ne thjesht e zhvendosëm kodin për funksionet-selektorë në një vend të vetëm në aplikacion dhe tani na duhet të bëjmë ndryshimet përkatëse aty, ku i kemi përdorur. Le të fillojmë me skedarin ProductsList.jsx. Le të importojmë në të selectAllProducts, pasi këtu na duhen të gjitha produktet:

products/ProductsList.jsximport { selectAllProducts } from './productsSlice'

Dhe në fillim të kodit të funksionit ProductsList, le të zëvendësojmë:

products/ProductsList.jsxconst products = useSelector((state) => state.products)

Me rreshtin:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

Tani le të kalojmë te skedari ProductPage.jsx. Këtu na duhej produkti sipas id. Le të bëjmë zëvendësimin e rreshtit (mos harroni për importin):

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

Me:

products/ProductPage.jsxconst product = useSelector((state) => selectProductById(state, productId))

Bëni vetë një zëvendësim të ngjashëm në skedarin EditProductForm.jsx. Këtu na duhet gjithashtu një produkt sipas id.

Mbani mend, që një optimizim i tillë është vetëm për lehtësinë tuaj dhe ju mund ta bëni atë kur të mendoni se është e nevojshme dhe e përshtatshme. Në shembullin tonë, imagjinoni që ne do të shkruanim kodin e funksionit-selektor çdo herë në vende të ndryshme, dhe pastaj do të ndryshonim strukturën e state, dhe do të duhej ta korrigjonim atë në të gjitha komponentët.