react-native - developer - react native npm

Suscríbete a cambio de propiedad única en la tienda en Redux

Question

En Redux puedo suscribirme fácilmente para almacenar cambios con

store.subscribe(() => my handler goes here)

Pero, ¿qué sucede si mi tienda está llena de objetos diferentes y en un lugar determinado de mi aplicación quiero suscribirme a los cambios realizados solo en un objeto específico en la tienda?

Answer 1

Además de lo que dijo Andy Noelker, mapStateToProps no solo pasa parte del estado correctamente en su árbol de componentes, sino que también se suscribe a los cambios realizados directamente en estas partes suscritas del estado.

Es cierto que a cada función mapStateToProp que vincula con la tienda se le 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 las claves de nivel superior a las que se suscribió no cambiaron ( la referencia permanece igual). Entonces mapStateToProps no llamaría a re-render. Por lo tanto, si desea que el concepto funcione, debe mantener mapStateToProps simple, sin fusionar, cambiar de tipo o cualquier otra cosa, simplemente deben transmitir partes del estado.

Si desea reducir los datos del estado al suscribirse, por ejemplo, si tenía datos de lista en el estado y desea convertirlos en objetos con identificadores como claves, o si desea unir múltiples estados en estructuras de datos, debe combinar mapStateToProps con createSelector from reselect library, haciendo todas estas modificaciones dentro del selector. Los selectores son funciones puras que reducen y almacenan en caché los fragmentos de estado que se pasan como entrada y, si la entrada no cambia, devuelven exactamente la misma referencia que hicieron en la última llamada, sin realizar la reducción.

Answer 2

No hay forma de suscribirse a una parte de la tienda cuando se utiliza la subscribe directamente, pero, como dice el creador de Redux, ¡no use la subscribe directamente! Para que el flujo de datos de una aplicación de Redux realmente funcione, usted querrá un componente que envuelva su aplicación completa. Este componente se suscribirá a tu tienda. El resto de sus componentes serán hijos de este componente de envoltura y solo obtendrán las partes del estado que necesitan.

Si está utilizando Redux con React, hay una buena noticia: ¡el paquete oficial de react-redux se encarga de esto por usted! Proporciona ese componente contenedor, llamado <Provider /> . A continuación, tendrá al menos un "componente inteligente" que escucha los cambios de estado que el Provider transmitido desde la tienda. Puede especificar qué partes del estado debería escuchar, y esas partes del estado se transmitirán como apoyo a ese componente (y luego, por supuesto, pueden transmitirlas a sus propios hijos). Puede especificar eso utilizando la función connect() en su componente "inteligente" y utilizando la función mapStateToProps como primer parámetro. Recordar:

Envuelva el componente raíz con el componente Provider que se suscribe para almacenar cambios

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById(''root'')
)

Ahora, cualquier elemento secundario de <App /> que se incluya con connect() será un componente "inteligente". Puede pasar en mapStateToProps para seleccionar ciertas partes del estado y asignarle esas propiedades.

const mapStateToProps = (state) => {
    return {
        somethingFromStore: state.somethingFromStore
    }
}

class ChildOfApp extends Component {
    render() {
        return <div>{this.props.somethingFromStore}</div>
    }
}

//wrap App in connect and pass in mapStateToProps
export default connect(mapStateToProps)(ChildOfApp)

Obviamente, <App /> puede tener muchos hijos y usted puede escoger y elegir qué partes del estado debe escuchar mapStateToProps para cada uno de sus hijos. Yo sugeriría leer los documentos sobre el uso con React para obtener una mejor comprensión de este flujo.

Answer 3

Redux solo ofrece una forma genérica única de saber cuándo se ha actualizado la tienda: el método de subscribe . Las devoluciones de llamada para subscribe no obtienen ninguna información sobre lo que podría haber cambiado, ya que la API de subscribe 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.

Debido a eso, alguien tiene que escribir una lógica específica para comparar el estado antiguo frente al estado nuevo, y ver si algo ha cambiado. Puede manejar esto utilizando React-Redux, especificando una función mapStateToProps para su componente, implementando componentWillReceiveProps en su componente, y verificando si los accesorios específicos de la tienda han cambiado.

También hay un par de bibliotecas adicionales 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.