Selektorien hankinta Reduxissa

On joskus erittäin hyödyllistä päästä eroon tarpeettomasta koodista sovelluksessa sekä kapseloida data.

Avataan tuotesovelluksemme. Huomaa, että useassa paikassa sovellusta käytämme selektoreita nostaaksemme tuoteslaisen, jotta voimme suorittaa sen kanssa joitain toimintoja.

Ja nyt avaamme tiedostomme productsSlice.js, menemme tiedoston loppuun ja lisäämme pari koodiriviä, joissa kirjoitamme kaksi selektoria ja viemme ne. Yksi funktio on kaikkien tuotteiden hakemiseen:

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

Ja sen jälkeen toinen - yhden tuotteen hakemiseen id:n perusteella:

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

Tietenkin sinulla voi herää oikeutettu kysymys - mistä meillä on tällainen kiemura: state.products.products? Vastaus on yksinkertainen, muistatko, että edellisellä tunnilla muutimme slaisen rakennetta ja nyt tuotteemme sijaitsevat taulukkona erillisessä ominaisuudessa products tuoteslaisessa state.products (muista, että tässä state on Reduxin pääkohdetila, joka sisältää kaikki slaiseja).

Siten siirsimme vain koodin selektori-funktioille yhteen paikkaan sovelluksessa ja nyt meidän täytyy tehdä asianmukaiset muutokset siellä, missä käytimme niitä. Aloitetaan tiedostosta ProductsList.jsx. Tuodaan siihen selectAllProducts, koska tässä tarvitsemme saada kaikki tuotteet:

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

Ja funktion ProductsList alussa, korvataan:

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

Rivillä:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

Ja nyt siirrytään tiedostoon ProductPage.jsx. Tässä tarvitsimme tuotteen id:n perusteella. Teemme korvauksen riville (älä unohda importtia):

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

Kohtaan:

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

Tee samanlainen korjaus itse tiedostoon EditProductForm.jsx. Tässä tarvitsemme myös tuotteen id:n perusteella.

Muista, että tällainen optimointi on vain sinun mukavuutesi vuoksi ja voit tehdä sen silloin, kun pidät sitä tarpeellisena ja kätevänä. Ja esimerkissämme kuvittele, että olisimme kirjoittaneet selektori-funktion koodin joka kerta eri paikoissa, ja sitten olisimme muuttaneet tilan rakennetta, ja se olisi sitten täytynyt korjata kaikissa komponenteissa.