You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
116 lines
2.8 KiB
116 lines
2.8 KiB
# Integrate Redux Into Comments Part 2
|
|
|
|
The last section works, but there are some optimizations we can make
|
|
|
|
## Lesson Objectives
|
|
|
|
1. Install `react-redux`
|
|
1. Map Redux State To The CommentsList Component
|
|
1. Map a Dispatch ADD Action to a CommentsForm Component property
|
|
|
|
## Install `react-redux`
|
|
|
|
```
|
|
npm install react-redux --save-dev
|
|
```
|
|
|
|
Import `react-redux`'s `Provider` module in `js/index.js`:
|
|
|
|
```javascript
|
|
import { Provider } from 'react-redux';
|
|
```
|
|
|
|
In `js/index.js` wrap `<Comments></Comments>` in a `<Provider></Provider>` component to make redux available to the `Comments` component. Also set the `store` property to the `store` we import from `./store.js`:
|
|
|
|
```javascript
|
|
import store from './store.js';
|
|
|
|
ReactDOM.render(
|
|
<Provider store={store}>
|
|
<Comments></Comments>
|
|
</Provider>,
|
|
document.querySelector('main')
|
|
);
|
|
```
|
|
|
|
## Map Redux State To The CommentsList Component
|
|
|
|
In `js/components/commentslist.jsx`, import `connect` from `react-redux`:
|
|
|
|
```javascript
|
|
import { connect } from 'react-redux';
|
|
```
|
|
|
|
In `js/components/commentslist.jsx` create a function that will map redux `state` to component properties:
|
|
|
|
```javascript
|
|
const mapStateToProps = function(state){
|
|
return {
|
|
comments: state
|
|
}
|
|
}
|
|
```
|
|
|
|
In `js/components/commentslist.jsx` connect the mapper with the component:
|
|
|
|
```javascript
|
|
const VisibleCommentsList = connect(
|
|
mapStateToProps
|
|
)(CommentsList);
|
|
```
|
|
|
|
In `js/components/commentslist.jsx`, export `VisibleCommentsList`:
|
|
|
|
```javascript
|
|
export default VisibleCommentsList;
|
|
```
|
|
|
|
You can now remove the `constructor`/`componentDidMount` functions and change `this.state.comments.map` to `this.props.comments.map`. We're back to using props instead of component state:
|
|
|
|
## Map a Dispatch ADD Action to a CommentsForm Component property
|
|
|
|
Import `connect` component from `react-redux` into `js/components/commentsForm.jsx`:
|
|
|
|
```javascript
|
|
import { connect } from 'react-redux';
|
|
```
|
|
|
|
Now create a function that will map a dispatch to a property in `js/components/commentsForm.jsx`:
|
|
|
|
```javascript
|
|
const mapDispatchToProps = function(dispatch){
|
|
return {
|
|
handleSubmit: function(comment){
|
|
dispatch({type:'ADD', comment: comment });
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
Connect the mapper to the `CommentsForm` component in `js/components/commentsForm.jsx`:
|
|
|
|
```javascript
|
|
const VisibleCommentsForm = connect(
|
|
null, //normally the mapStateToProps function
|
|
mapDispatchToProps
|
|
)(CommentsForm)
|
|
```
|
|
|
|
Export the `VisibleCommentsForm` component:
|
|
|
|
```javascript
|
|
export default VisibleCommentsForm;
|
|
```
|
|
|
|
Refactor `handleSubmit` to this the `handleSubmit` component prop:
|
|
|
|
```javascript
|
|
handleSubmit(event){
|
|
event.preventDefault();
|
|
this.props.handleSubmit({
|
|
body: this.refs.body.value,
|
|
author: this.refs.author.value
|
|
});
|
|
}
|
|
```
|