connect
to connect React to Redux, you can apply what you've learned to your React component that handles messages.
In the last lesson, the component you connected to Redux was named Presentational
, and this wasn't arbitrary. This term generally refers to React components that are not directly connected to Redux. They are simply responsible for the presentation of UI and do this as a function of the props they receive. By contrast, container components are connected to Redux. These are typically responsible for dispatching actions to the store and often pass store state to child components as props.
Presentational
. Create a new component held in a constant called Container
that uses connect
to connect the Presentational
component to Redux. Then, in the AppWrapper
, render the React Redux Provider
component. Pass Provider
the Redux store
as a prop and render Container
as a child. Once everything is setup, you will see the messages app rendered to the page again.
AppWrapper
should render to the page.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })(), 'The AppWrapper
should render to the page.');
- text: The Presentational
component should render an h2
, input
, button
, and ul
elements.
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: The Presentational
component should render an h2
, input
, button
, and ul
elements.
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: The Presentational
component should receive messages
from the Redux store as a 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: The Presentational
component should receive the submitMessage
action creator as a 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.');
```