Selektory i hook useSelector w Redux
W poprzednich lekcjach zapisaliśmy w store dane produktów. Jak możemy je pobrać z store?
Aby to zrobić, musimy napisać funkcję-selektor. Ta funkcja wie, jak wyodrębnić określoną część informacji z wartości stanu przechowywanej w store i pomaga uniknąć pisania powtarzającego się kodu w miarę rozrastania się aplikacji. Na wejściu ta funkcja przyjmuje state, a na wyjściu zwraca niezbędny wycinek stanu. Na przykład tak:
const selectValue = state => state.some.value
Na samym początku podręcznika wspomniano,
że store ma metodę getState. I
z łatwością moglibyśmy z niej skorzystać, aby
pobrać wartość stanu:
const value = selectValue(store.getState())
Problem polega na tym, że nasze komponenty React
nie mogą bezpośrednio uzyskiwać dostępu do
store, ponieważ nie wolno go importować
do pliku komponentu. Ale mamy możliwość
uzyskania danych w komponencie za pomocą
hooka React-Redux useSelector. Poza tym,
dzięki temu hookowi nasze komponenty będą zawsze otrzymywać
tylko aktualne dane:
const count = useSelector(selectValue)
