Селекторы и хук useSelector в Redux
На прошлых уроках мы записали в store данные продуктов. Как же нам получать их из store?
Для того, чтобы это сделать, нам необходимо написать функцию-селектор. Эта функция знает как извлечь определенный кусок информации из значения стейта, хранящегося в store и помогает избежать написания повторяющегося кода при разрастании приложения. На вход эта функция принимает state, а на выходе выдает необходимый слайс стейта. Например так:
const selectValue = state => state.some.value
В самом начале учебника упоминалось о том,
что у store есть метод getState
. И мы
бы легко могли им воспользоваться для
получения значения стейта:
const value = selectValue(store.getState())
Проблема заключается в том, что наши React
компоненты не могут напрямую обращаться к
store, поскольку его запрещено импортировать
в файл компонента. Но у нас есть возможность
получить данные в компоненте с помощью
React-Redux хука useSelector
. К тому же,
с этим хуком наши компоненты будут всегда получать
только актуальные данные:
const count = useSelector(selectValue)