mapStateToProps()
y mapDispatchToProps()
, puede usarlas para mapear el state
y dispatch
a los props
de uno de sus componentes React. El método de connect
de React Redux puede manejar esta tarea. Este método toma dos argumentos opcionales, mapStateToProps()
y mapDispatchToProps()
. Son opcionales porque puede tener un componente que solo necesita acceso al state
pero no necesita enviar ninguna acción, o viceversa. Para usar este método, pase las funciones como argumentos e inmediatamente llame al resultado con su componente. Esta sintaxis es un poco inusual y se parece a: connect(mapStateToProps, mapDispatchToProps)(MyComponent)
Nota: Si desea omitir uno de los argumentos del método de connect
, pase null
en su lugar. mapStateToProps()
y mapDispatchToProps()
y un nuevo componente React llamado Presentational
. Conecte este componente para Redux con la connect
método de la ReactRedux
objeto global, y lo llaman inmediatamente en el Presentational
componente. Asigne el resultado a una nueva const
llamada ConnectedComponent
que representa el componente conectado. Eso es todo, ahora estás conectado a Redux! Intente cambiar cualquiera de los argumentos de connect
a null
y observe los resultados de la prueba. Presentational
debe hacer.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The Presentational
component should render.");'
- text: El componente de Presentational
debe recibir messages
prop messages
través de connect
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return props.messages === "__INITIAL__STATE__"; })(), "The Presentational
component should receive a prop messages
via connect
.");'
- text: El componente de Presentational
debe recibir un prop submitNewMessage
través de connect
.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find("Presentational").props(); return typeof props.submitNewMessage === "function"; })(), "The Presentational
component should receive a prop submitNewMessage
via connect
.");'
```