Saltar al contenido

¿Cómo se pasa el estado a los selectores en una aplicación react-redux?

Investigamos por diferentes espacios para así tener para ti la solución a tu problema, en caso de inquietudes puedes dejarnos tu duda y te contestamos porque estamos para servirte.

Solución:

Descripción general de cómo se transmite el estado a un selector cuando usamos el componente Connect de react-redux

¿Qué es un seleccionador?

Un selector extrae un subconjunto de datos de una fuente.

Pensemos en la tienda Redux como nuestra ‘base de datos frontal’. Para el propósito En una base de datos, si desea extraer un subconjunto de los datos totales, ejecute una consulta. De manera similar, los selectores son nuestras consultas a la tienda Redux.

En el caso más simple, un selector podría devolver el estado de toda la tienda.

Los documentos de reselect nos dan tres grandes razones para usar selectores

  • Los selectores pueden calcular datos derivados, lo que permite que Redux almacene el estado mínimo posible.
  • Los selectores son eficientes. Un selector no se vuelve a calcular a menos que cambie uno de sus argumentos.
  • Los selectores son componibles. Se pueden utilizar como entrada para otros selectores.

¿Qué es un componente de orden superior?

Un componente de orden superior es una función que toma un componente existente y devuelve un nuevo componente.

Connect es un componente de orden superior al que se le asigna un selector

Tomado de esta esencia brillante que da una buena explicación de conectar.

connect() es una función que inyecta accesorios relacionados con Redux en su componente.

Connect es un componente de orden superior que hace que nuestro componente React conozca la tienda Redux. Cuando llamamos a connect podemos pasar mapStateToProps y mapDispatchToProps. Estas funciones definen la forma en que nuestro nuevo componente estará conectado a la tienda redux.

Podemos darle acceso al estado pasando una función mapStateToProps como argumento.

También podemos vincular a los creadores de acciones a store.dispatch a través de mapDispatchToProps. La ventaja de esto es que no necesitamos pasar toda la tienda para que un componente tenga acceso a store.dispatch para que el componente pueda enviar sus propias acciones de Redux.

La función mapStateToProps que pasamos a Connect es un selector

De los documentos de react-redux

La función mapStateToProps toma un solo argumento del estado de la tienda Redux completa y devuelve un objeto para pasar como accesorios. A menudo se le llama selector.

Piense en el objeto que devuelve mapStateToProps como resultado de nuestra consulta a la tienda Redux. La resultante

La función mapStateToProps normalmente debería devolver un objeto simple.

El resultado de llamar a mapStateToProps normalmente será un objeto simple que representa los datos que extrajimos de la tienda redux.

El componente Connect de orden superior nos permite ampliar la funcionalidad de un componente existente fusionando los datos de este nuevo objeto con los accesorios existentes del componente.

Dado que los selectores son solo funciones, también podemos conectarlos a la tienda Redux usando el componente de conexión.

Sin embargo, en algunos casos podemos devolver una función. ¿Por qué haríamos esto?

Al devolver una función en mapStateToProps, podemos secuestrar el ciclo de renderizado de los componentes y optimizar el rendimiento.

En escenarios avanzados en los que necesita más control sobre el rendimiento de la representación, mapStateToProps() también puede devolver una función. En este caso, esa función se usará como mapStateToProps() para una instancia de componente en particular. Esto le permite hacer memoria por instancia.

Al pasar la función mapStateToProps como argumento a nuestro componente de orden superior, nuestro componente conectado se actualizará cada vez que algún estado haya cambiado en la tienda Redux.

Si estas actualizaciones ocurren con mucha frecuencia o el árbol de estado es grande, entonces la biblioteca de re-selección es útil ya que nos permite usar memorizado selectores.

Esta palabra elegante significa que los resultados de las llamadas del selector se almacenan en caso de que necesiten recuperarse nuevamente.

Entonces, si mapStatesToProps devolviera un objeto simple en lugar de una función, cada vez que cambiara el estado de nuestra tienda, tendríamos nuevos accesorios para nuestro componente.

Conexión de selectores a la tienda

Si está utilizando React Redux, puede llamar a los selectores como funciones regulares dentro de mapStateToProps():

import  getVisibleTodos  from '../selectors'

const mapStateToProps = (state) => 
  return 
    todos: getVisibleTodos(state)
  

Compartir selectores entre múltiples componentes

Podemos dar accesorios a los selectores de reselección como componentes cuando usamos la biblioteca de reselección. Esto nos permite compartir selectores entre múltiples componentes.

Digamos que tenemos varias listas de tareas pendientes, cada una con su propia identificación. Todavía usaríamos el mismo selector getVisibleTodos para cada instancia de la lista de tareas, pero solo pasaríamos una identificación diferente como accesorio.

Sin embargo, el problema con esto es que createSelector solo devuelve el valor en caché cuando su conjunto de argumentos es el mismo que su conjunto de argumentos anterior.

Los documentos de reselección señalan que podemos superar esta limitación devolviendo una función dentro de mapStateToProps:

Para compartir un selector entre varios componentes y conservar la memorización, cada instancia del componente necesita su propia copia privada del selector. Si el argumento mapStateToProps proporcionado para conectar devuelve una función en lugar de un objeto, se usará para crear una función mapStateToProps individual para cada instancia del contenedor.

Al devolver una función dentro de mapStateToProps, podemos superar esta limitación y la memorización funcionará correctamente.

Para una explicación más detallada ver esto

Es tan simple: vamos a ponerte un ejemplo, tengo un mapStateToProps Me gusta esto:

function mapStateToProps(state) 
  return 
    categoryHistory: getCategoryHistory(state,'extended')
  

entonces he creado un selector Me gusta esto:

export const getCategoryHistory = (state, type) => createSelector([getTaxonomy, selectedCategoryID], (categories, categoryID) => categories.getIn([type, categoryID]) || [])(state)

La solución es llamar crearSelector() pasando el estado como parámetros:

createSelector()(state)

dentro del selector puede usar todos los parámetros que desea pasar.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *