El tutorial o código que hallarás en este post es la resolución más eficiente y efectiva que encontramos a esta duda o dilema.
Solución:
No hay forma de suscribirse a parte de la tienda cuando se usa subscribe directamente, pero como dice el propio creador de Redux, no use subscribe ¡directamente! Para que el flujo de datos de una aplicación Redux realmente funcione, querrá un componente que envuelva toda su aplicación. Este componente se suscribirá a su tienda. El resto de sus componentes serán elementos secundarios de este componente contenedor y solo obtendrán las partes del estado que necesitan.
Si está utilizando Redux con React, entonces hay buenas noticias: ¡el paquete oficial react-redux se encarga de esto por usted! Proporciona ese componente contenedor, llamado Provider de la tienda. Puede especificar qué partes del estado debe escuchar, y esas partes del estado se transmitirán como accesorios a ese componente (y luego, por supuesto, puede pasarlas a sus propios hijos). Puede especificar eso usando la función connect() en su componente “inteligente” y usando el mapStateToPropsfuncionar como un primer parámetro. Recordar:
Envuelva el componente raíz con Provider componente que se suscribe a los cambios de la tienda
ReactDOM.render(
,
document.getElementById('root')
)
Ahora cualquier hijo de connect() será un componente “inteligente”. puedes pasar mapStateToProps para elegir ciertas partes del estado y dárselas como accesorios.
const mapStateToProps = (state) =>
return
somethingFromStore: state.somethingFromStore
class ChildOfApp extends Component
render()
return this.props.somethingFromStore
//wrap App in connect and pass in mapStateToProps
export default connect(mapStateToProps)(ChildOfApp)
Obviamente mapStateToProps debe escuchar para cada uno de sus hijos. Sugeriría leer los documentos sobre el uso con React para comprender mejor este flujo.
Redux solo ofrece una única forma genérica de saber cuándo se ha actualizado la tienda: la subscribe método. devoluciones de llamada a subscribe no obtenga ninguna información sobre lo que podría haber cambiado, ya que el subscribe La API es deliberadamente de bajo nivel y simplemente ejecuta cada devolución de llamada sin argumentos. Todo lo que sabes es que la tienda se ha actualizado de alguna manera.
Por eso, alguien tiene que escribir una lógica específica para comparar el estado antiguo con el estado nuevo y ver si algo ha cambiado. Puede manejar esto usando React-Redux, especificando un mapStateToProps función para su componente, implementando componentWillReceiveProps en su componente y verificando si han cambiado accesorios específicos de la tienda.
También hay un par de bibliotecas de complementos que intentan manejar este caso: https://github.com/ashaffer/redux-subscribe y https://github.com/jprichardson/redux-watch. Básicamente, ambos le permiten especificar una parte específica del estado para observar, utilizando diferentes enfoques.
Además de lo que dijo Andy Noelker, mapStateToProps no solo transfiere parte del estado correctamente a su árbol de componentes, sino que también se suscribe a los cambios realizados directamente en estas partes suscritas del estado.
Está true que cada mapStateToProp la función que vincula a la tienda se llama cada vez que se cambia cualquier parte del estado, pero el resultado de la llamada se vuelve superficial en comparación con la llamada anterior, si es de nivel superior keys al que se suscribió no cambió (la referencia sigue siendo la misma). Entonces mapStateToProps no llamaría a volver a renderizar. Entonces, si desea que el concepto funcione, debe mantener mapStateToProps simple, sin fusiones, cambios de tipo ni nada, simplemente deben transmitir partes del estado.
Si desea reducir los datos del estado al suscribirse, por ejemplo, tenía datos de lista en el estado y desea convertirlos en objetos con identificaciones como keyso desea unir varios estados en estructuras de datos, debe combinar mapStateToProps con createSelector desde reselect biblioteca, haciendo todas estas modificaciones dentro del selector. Los selectores son funciones puras que reducen y almacenan fragmentos de estado en caché que se pasan como entrada y, si la entrada no cambió, devuelven exactamente la misma referencia que hicieron en la última llamada, sin realizar la reducción.
Sección de Reseñas y Valoraciones
Si posees algún recelo o capacidad de perfeccionar nuestro escrito puedes escribir una referencia y con deseo lo ojearemos.