react-redux
package. It provides a way for you to pass Redux state
and dispatch
to your React components as props
.
Over the next few challenges, first, you'll create a simple React component which allows you to input new text messages. These are added to an array that's displayed in the view. This should be a nice review of what you learned in the React lessons. Next, you'll create a Redux store and actions that manage the state of the messages array. Finally, you'll use react-redux
to connect the Redux store with your component, thereby extracting the local state into the Redux store.
DisplayMessages
component. Add a constructor to this component and initialize it with a state that has two properties: input
, that's set to an empty string, and messages
, that's set to an empty array.
DisplayMessages
component should render an empty div
element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); return mockedComponent.find('div').text() === '' })(), 'The DisplayMessages
component should render an empty div
element.');
- text: The DisplayMessages
constructor should be called properly with super
, passing in props
.
testString: getUserInput => assert((function() { const noWhiteSpace = getUserInput('index').replace(/\s/g,''); return noWhiteSpace.includes('constructor(props)') && noWhiteSpace.includes('super(props'); })(), 'The DisplayMessages
constructor should be called properly with super
, passing in props
.');
- text: 'The DisplayMessages
component should have an initial state equal to {input: "", messages: []}
.'
testString: "assert((function() { const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages)); const initialState = mockedComponent.state(); return typeof initialState === 'object' && initialState.input === '' && Array.isArray(initialState.messages) && initialState.messages.length === 0; })(), 'The DisplayMessages
component should have an initial state equal to {input: \"\", messages: []}
.');"
```