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:

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

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

jsxconst count = useSelector(selectValue)