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:

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

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

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

import { selectAllProducts } from './productsSlice'

Ja funktion ProductsList alussa, korvataan:

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

Rivillä:

const products = useSelector(selectAllProducts)

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

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

Kohtaan:

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

Avaa opiskelijasovelluksesi. Avaa siellä tiedosto studentsSlice.js. Tiedoston alareunassa kirjoita ja vie, kuten oppitunnilla näytetään, kaksi selektoria kaikkien opiskelijoiden saamiseksi selectAllStudents ja yhden opiskelijan saamiseksi id:n perusteella selectStudentById.

Nyt tuo selectAllStudents ja selectStudentById tiedostoihin StudentsList.jsx, StudentPage.jsx ja EditStudentForm.jsx, tee näissä tiedostoissa asianmukaiset muutokset, kuten oppitunnilla näytetään.