He leído este hilo. ¿Cuál es la diferencia entre estado y props en React?
Dice que los accesorios son diferentes de los estados e idealmente los accesorios no deben cambiar en su componente y solo deben ser cambiados por su componente principal.
Sin embargo, la función mapStateToProps en react-redux asigna estados en Redux a accesorios de un componente React, que básicamente es cambiar los accesorios de un componente React cuando el estado Redux es cambiado por una acción Redux.
No tiene sentido para mí. Parece que debería haber sido mapStateToStates en su lugar y asigna los estados de Redux a los estados de un componente React.
¿Me estoy perdiendo de algo?
Dice que los accesorios son diferentes de los estados e idealmente los accesorios no deben cambiar en su componente y solo deben ser cambiados por su componente principal.
Estado aquí se refiere al estado interno del componente, que el componente puede cambiar internamente a través .setState() .
Sin embargo, la función mapStateToProps en react-redux asigna estados en Redux a accesorios de un componente React, que básicamente cambia los accesorios de un componente React cuando el estado de Redux es cambiado por una acción de Redux.
El estado aquí se refiere a la tienda redux, un estado externo. El método de connect de react-redux crea un HOC - componente de orden superior (un componente que es consciente de los cambios de estado de la tienda). El HOC envuelve el componente de reacción tonta, que no está al tanto de la tienda. Usando mapStateToProps el HOC mapea los datos del estado externo y los inyecta al componente de reacción a través de los accesorios.
Estado en la tienda redux -> mapStateToProps en HOC -> accesorios pasados al componente tonto
Entonces, el HOC es el padre y el componente tonto es el hijo. El padre inyecta nuevos accesorios al componente secundario, y la primera afirmación "los accesorios no deben cambiarse en su componente y solo debe cambiarse por su componente principal" no se viola.
Notas:
Puede encontrar más información sobre componentes de orden superior en el artículo de Dan Abramov sobre componentes de presentación y contenedores .
Para entender cómo funciona react-redux connect, en el curso gratuito en línea Primeros pasos con Redux , Dan Abramov muestra cómo construir connect desde cero (lecciones 22-29)
state aquí en mapStateToProps significa state en ReduxStore .
Asigna el state de Redux a los props de ReactComponent . No es necesario asignar accesorios a estados, por ejemplo,componente puro
mapStateToProps pasa el estado como accesorios al componente usando la función react-redux connect (). Considere la función connect() como componente contenedor, que pasa accesorios a los niños.
mapStateToProps connect (state) -----------------------> component(props)