react-notes/CommentsRedux2.md

Integrate Redux Into Comments Part 2

The last section works, but there are some optimizations we can make

Lesson Objectives

1. Install react-redux
2. Map Redux State To The CommentsList Component
3. Map a Dispatch ADD Action to a CommentsForm Component property

Set Up

1. Copy the comments_build_example directory from this repo. It's what we built here
2. Copy the store.js file we created for this build into the js/ dir of the comments_build_example dir you just created in the previous step
3. Install redux with npm install redux --save-dev

Install react-redux

npm install react-redux --save-dev

Import react-redux's Provider module in js/index.js:

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:

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:

import { connect } from 'react-redux';

In js/components/commentslist.jsx create a function that will map redux state to component properties:

const mapStateToProps = function(state){
    return {
        comments: state
    }
}

In js/components/commentslist.jsx connect the mapper with the component:

const VisibleCommentsList = connect(
    mapStateToProps
)(CommentsList);

In js/components/commentslist.jsx, export VisibleCommentsList:

export default VisibleCommentsList;

You can now remove the constructor/componentDidMount functions and change this.state.comments.map to this.props.comments.map show we 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:

import { connect } from 'react-redux';

Now create a function that will map a dispatch to a property in js/components/commentsForm.jsx:

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:

const VisibleCommentsForm = connect(
    null, //normally the mapStateToProps function
    mapDispatchToProps
)(CommentsForm)

Export the VisibleCommentsForm component:

export default VisibleCommentsForm;

Refactor handleSubmit to this the handleSubmit component prop:

handleSubmit(event){
    event.preventDefault();
    this.props.handleSubmit({
        body: this.refs.body.value,
        author: this.refs.author.value
    });
}