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:

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

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

export 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:

import { selectAllProducts } from './productsSlice'

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

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

Med linjen:

const 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):

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

Med:

const 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.

Åpne studentapplikasjonen din. Åpne filen studentsSlice.js i den. Skriv på slutten av filen og eksporter, slik det vises i leksjonen, to selektorer for å hente alle studentene selectAllStudents og for å hente en student etter id selectStudentById.

Importer nå selectAllStudents og selectStudentById i filene StudentsList.jsx, StudentPage.jsx og EditStudentForm.jsx, utfør de tilsvarende endringene i disse filene, som vist i leksjonen.