react-redux
package to help accomplish these tasks.
React Redux provides a small API with two key features: Provider
and connect
. Another challenge covers connect
. The Provider
is a wrapper component from React Redux that wraps your React app. This wrapper then allows you to access the Redux store
and dispatch
functions throughout your component tree. Provider
takes two props, the Redux store and the child components of your app. Defining the Provider
for an App component might look like this:
<Provider store={store}>
<App/>
</Provider>
DisplayMessages
component. The only new piece is the AppWrapper
component at the bottom. Use this top level component to render the Provider
from ReactRedux
, and pass the Redux store as a prop. Then render the DisplayMessages
component as a child. Once you are finished, you should see your React component rendered to the page.
Note: React Redux is available as a global variable here, so you can access the Provider with dot notation. The code in the editor takes advantage of this and sets it to a constant Provider
for you to use in the AppWrapper
render method.
AppWrapper
should render.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').length === 1; })(), 'The AppWrapper
should render.');
- text: The Provider
wrapper component should have a prop of store
passed to it, equal to the Redux store.
testString: getUserInput => assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return getUserInput('index').replace(/\s/g,'').includes('Provider
wrapper component should have a prop of store
passed to it, equal to the Redux store.');
- text: DisplayMessages
should render as a child of AppWrapper
.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('AppWrapper').find('DisplayMessages').length === 1; })(), 'DisplayMessages
should render as a child of AppWrapper
.');
- text: The DisplayMessages
component should render an h2, input, button, and ul
element.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('div').length === 1 && mockedComponent.find('h2').length === 1 && mockedComponent.find('button').length === 1 && mockedComponent.find('ul').length === 1; })(), 'The DisplayMessages
component should render an h2, input, button, and ul
element.');
```