Hent selektorer i Redux

Somme tider er det meget nyttigt at fjerne overflødigt kode fra applikationen, samt at indkapsle data.

Lad os åbne vores produktapplikation. Læg mærke til, at flere steder i applikationen bruger vi selektorer til at trække product-slice'et ud for at udføre handlinger med det.

Nu åbner vi vores productsSlice.js, scroller til slutningen af filen og tilføjer et par linjer kode, hvor vi skriver to selektorer og eksporterer dem. Den ene funktion vil være til at hente alle produkter:

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

Og efter den, den anden - til at hente et enkelt produkt efter id:

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

Selvfølgelig kan du stille det retmæssige spørgsmål - hvorfor har vi sådan en konstruktion: state.products.products? Svaret er enkelt, vi ændrede jo slice-strukturen i forrige lektion, og nu vil vores produkter være placeret som et array i en separat egenskab products i product-slice'et state.products (husk, at state her er rodobjektet for Redux-tilstanden, som indeholder alle slices).

På denne måde flyttede vi blot koden for funktionsselektorer til ét sted i applikationen, og nu er vi nødt til at foretage de tilsvarende ændringer der, hvor vi brugte dem. Lad os starte med filen ProductsList.jsx. Vi importerer selectAllProducts til den, da vi her skal hente alle produkter:

import { selectAllProducts } from './productsSlice'

Og i starten af koden for funktionen ProductsList erstatter vi:

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

Med linjen:

const products = useSelector(selectAllProducts)

Lad os nu gå til filen ProductPage.jsx. Her havde vi brug for produktet efter id. Vi erstatter linjen (glem ikke importen):

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

Med:

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

Foretag en lignende erstatning selv i filen EditProductForm.jsx. Her har vi også brug for et produkt efter id.

Husk, at en sådan optimering kun er for din egen bekvemmelighed, og du kan gøre det, når du finder det nødvendigt og passende. Og i vores eksempel, forestil dig, at vi skrev koden til funktionsselektoren hver gang på forskellige steder, og så ændrede vi strukturen af staten, og så skulle vi rette det i alle komponenterne.

Åbn din studerendeapplikation. Åbn filen studentsSlice.js i den. I bunden af filen skal du skrive og eksportere, som vist i lektionen, to selektorer for at hente alle studerende selectAllStudents og for at hente en enkelt studerende efter id selectStudentById.

Importer nu selectAllStudents og selectStudentById i filerne StudentsList.jsx, StudentPage.jsx og EditStudentForm.jsx, foretag de tilsvarende ændringer i disse filer, som vist i lektionen.