Selektorit ja useSelector-hook Reduxissa

Edellisillä tunneilla tallensimme storeen tuotetietoja. Kuinka saamme ne haettua storesta?

Tehdäksesi tämän, meidän on kirjoitettava funktio-selektori. Tämä funktio tietää, kuinka eristää tietyn palan tietoa storeen tallennetusta tilan arvosta ja auttaa välttämään toistuvan koodin kirjoittamista sovelluksen kasvaessa. Syötteenä tämä funktio ottaa staten, ja tulosteeksi se antaa tarvittavan tilan osan. Esimerkiksi näin:

const selectValue = state => state.some.value

Oppaan alussa mainittiin, että storella on metodi getState. Ja me voisimme helposti hyödyntää sitä saadaksemme tilan arvon:

const value = selectValue(store.getState())

Ongelma on, että React- komponenttimme eivät voi suoraan päästä käsiksi storeen, koska sen tuomista komponenttitiedostoon on kielletty. Mutta meillä on mahdollisuus saada data komponenttiin käyttämällä React-Redux-hookia useSelector. Lisäksi tämän hookin ansiosta komponenttimme saavat aina vain ajantasaiset tiedot:

const count = useSelector(selectValue)