2018-10-12 15:37:13 -04:00
|
|
|
---
|
|
|
|
title: Connect Redux to React
|
|
|
|
---
|
|
|
|
## Connect Redux to React
|
|
|
|
|
2019-05-09 06:27:06 -07:00
|
|
|
### Solution
|
|
|
|
<details>
|
|
|
|
<summary>Spoiler!</summary>
|
|
|
|
|
|
|
|
```jsx
|
|
|
|
const addMessage = (message) => {
|
|
|
|
return {
|
|
|
|
type: 'ADD',
|
|
|
|
message: message
|
|
|
|
}
|
|
|
|
};
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2019-05-09 06:27:06 -07:00
|
|
|
const mapStateToProps = (state) => {
|
|
|
|
return {
|
|
|
|
messages: state
|
|
|
|
}
|
|
|
|
};
|
2018-10-12 15:37:13 -04:00
|
|
|
|
2019-05-09 06:27:06 -07:00
|
|
|
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)
|
|
|
|
```
|
|
|
|
|
|
|
|
</details>
|