4.7 KiB
4.7 KiB
id | title | challengeType | isRequired |
---|---|---|---|
5a24c314108439a4d4036147 | Connect Redux to React | 6 | false |
Description
mapStateToProps()
and the mapDispatchToProps()
functions, you can use them to map state
and dispatch
to the props
of one of your React components. The connect
method from React Redux can handle this task. This method takes two optional arguments, mapStateToProps()
and mapDispatchToProps()
. They are optional because you may have a component that only needs access to state
but doesn't need to dispatch any actions, or vice versa.
To use this method, pass in the functions as arguments, and immediately call the result with your component. This syntax is a little unusual and looks like:
connect(mapStateToProps, mapDispatchToProps)(MyComponent)
Note: If you want to omit one of the arguments to the connect
method, you pass null
in its place.
Instructions
mapStateToProps()
and mapDispatchToProps()
functions and a new React component called Presentational
. Connect this component to Redux with the connect
method from the ReactRedux
global object, and call it immediately on the Presentational
component. Assign the result to a new const
called ConnectedComponent
that represents the connected component. That's it, now you're connected to Redux! Try changing either of connect
's arguments to null
and observe the test results.
Tests
tests:
- text: The <code>Presentational</code> component should render.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); return mockedComponent.find('Presentational').length === 1; })(), 'The <code>Presentational</code> component should render.');
- text: The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return props.messages === '__INITIAL__STATE__'; })(), 'The <code>Presentational</code> component should receive a prop <code>messages</code> via <code>connect</code>.');
- text: The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.
testString: assert((function() { const mockedComponent = Enzyme.mount(React.createElement(AppWrapper)); const props = mockedComponent.find('Presentational').props(); return typeof props.submitNewMessage === 'function'; })(), 'The <code>Presentational</code> component should receive a prop <code>submitNewMessage</code> via <code>connect</code>.');
Challenge Seed
const addMessage = (message) => {
return {
type: 'ADD',
message: message
}
};
const mapStateToProps = (state) => {
return {
messages: state
}
};
const mapDispatchToProps = (dispatch) => {
return {
submitNewMessage: (message) => {
dispatch(addMessage(message));
}
}
};
class Presentational extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h3>This is a Presentational Component</h3>
}
};
const connect = ReactRedux.connect;
// change code below this line
After Test
const store = Redux.createStore(
(state = '__INITIAL__STATE__', action) => state
);
class AppWrapper extends React.Component {
render() {
return (
<ReactRedux.Provider store = {store}>
<ConnectedComponent/>
</ReactRedux.Provider>
);
}
};
ReactDOM.render(<AppWrapper />, document.getElementById('root'))
Solution
const addMessage = (message) => {
return {
type: 'ADD',
message: message
}
};
const mapStateToProps = (state) => {
return {
messages: state
}
};
const mapDispatchToProps = (dispatch) => {
return {
submitNewMessage: (message) => {
dispatch(addMessage(message));
}
}
};
class Presentational extends React.Component {
constructor(props) {
super(props);
}
render() {
return <h3>This is a Presentational Component</h3>
}
};
const connect = ReactRedux.connect;
// change code below this line
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);