connect
para conectarse React to Redux, puede aplicar lo que ha aprendido a su componente React que maneja los mensajes. En la última lección, el componente que se conectó a Redux se llamó Presentational
, y esto no fue arbitrario. Este término generalmente se refiere a los componentes React que no están directamente conectados a Redux. Simplemente son responsables de la presentación de la interfaz de usuario y hacen esto en función de los accesorios que reciben. Por el contrario, los componentes del contenedor están conectados a Redux. Estos son generalmente responsables de enviar acciones a la tienda y, a menudo, pasan el estado de la tienda a componentes secundarios como accesorios. Presentational
. Cree un nuevo componente que se mantenga en una constante llamada Container
que use connect
para conectar el componente Presentational
a Redux. Luego, en AppWrapper
, renderice el componente React Redux Provider
. Pase a Provider
la store
Redux como utilería y renderice Container
como un niño. Una vez que todo esté configurado, verás nuevamente la aplicación de mensajes renderizada en la página. AppWrapper
debe renderizar a la página.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("AppWrapper").length === 1; })(), "The AppWrapper
should render to the page.");'
- text: 'El componente de Presentational
debe representar los elementos h2
, input
, button
y ul
.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find("Presentational").length === 1; })(), "The Presentational
component should render an h2
, input
, button
, and ul
elements.");'
- text: 'El componente de Presentational
debe representar los elementos h2
, input
, button
y ul
.'
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); return ( PresentationalComponent.find("div").length === 1 && PresentationalComponent.find("h2").length === 1 && PresentationalComponent.find("button").length === 1 && PresentationalComponent.find("ul").length === 1 ); })(), "The Presentational
component should render an h2
, input
, button
, and ul
elements.");'
- text: El componente de Presentational
debe recibir messages
de la tienda de Redux como prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return Array.isArray(props.messages); })(), "The Presentational
component should receive messages
from the Redux store as a prop.");'
- text: El componente de Presentational
debe recibir el creador de la acción submitMessage
como prop.
testString: 'assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const PresentationalComponent = mockedComponent.find("Presentational"); const props = PresentationalComponent.props(); return typeof props.submitNewMessage === "function"; })(), "The Presentational
component should receive the submitMessage
action creator as a prop.");'
```