Selectores y el hook useSelector en Redux
En las lecciones anteriores, guardamos en la store los datos de los productos. ¿Cómo los obtenemos de la store?
Para hacer esto, necesitamos escribir una función selector. Esta función sabe cómo extraer una parte específica de la información del valor del estado almacenado en la store y ayuda a evitar escribir código repetitivo cuando la aplicación crece. Como entrada, esta función toma el estado, y como salida devuelve el segmento necesario del estado. Por ejemplo así:
const selectValue = state => state.some.value
Al principio del manual se mencionó
que la store tiene un método getState. Y
podríamos usarlo fácilmente para
obtener el valor del estado:
const value = selectValue(store.getState())
El problema es que nuestros componentes de React
no pueden acceder directamente a la
store, ya que está prohibido importarla
en el archivo del componente. Pero tenemos la posibilidad
de obtener los datos en el componente usando
el hook de React-Redux useSelector. Además,
con este hook, nuestros componentes siempre recibirán
solo datos actualizados:
const count = useSelector(selectValue)
