Henting av selektorer i Redux

Noen ganger er det veldig nyttig å bli kvitt unødvendig kode i applikasjonen, samt innkapsle data.

La oss åpne produktapplikasjonen vår. Legg merke til at på flere steder i applikasjonen bruker vi selektorer for å hente ut produkt-slicen for å utføre handlinger med den.

Nå skal vi åpne productsSlice.js, bla til slutten av filen og legge til noen kodelinjer, der vi skriver to selektorer og eksporterer dem. En funksjon vil være for å hente alle produkter:

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

Og etter den, en andre - for å hente ett produkt etter id:

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

Selvfølgelig kan du ha et rettferdig spørsmål - hvorfor har vi en slik konstruksjon: state.products.products? Svaret er enkelt, vi endret slice-strukturen i forrige leksjon og nå vil produktene våre ligge som en array i et separat egenskap products i produkt-slicen state.products (husk at state her er rot-objektet til Redux-tilstanden, som inneholder alle slicer).

På denne måten flyttet vi bare koden for selektor-funksjonene til ett sted i applikasjonen og nå må vi gjøre de tilsvarende endringene der vi brukte dem. La oss starte med filen ProductsList.jsx. Importer selectAllProducts til den, siden vi her trenger å hente alle produktene:

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

Og i starten av ProductsList-funksjonen, bytter vi ut:

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

Med linjen:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

La oss nå gå til filen ProductPage.jsx. Her trengte vi et produkt etter id. La oss erstatte linjen (ikke glem importen):

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

Med:

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

Gjør en lignende erstatting selv i filen EditProductForm.jsx. Her trenger vi også et produkt etter id.

Husk at en slik optimalisering bare er for din egen bekvemmelighet og du kan gjøre den når du finner det nødvendig og passende. Og i vårt eksempel, se for deg at vi skrev koden for selektor-funksjonen hver gang på forskjellige steder, og så endret vi tilstandens struktur, og da måtte vi rette den opp i alle komponentene.