Let's import it from react-redux at the top of our newsletterEdit.js.

newsletterEdit.js

import { connect } from 'react-redux';
import * as actions from '../../actions';

Now let's set this up at the bottom of the page like we have in the past.

newsletterEdit.js

export default connect(null, actions)(EditNewsletter);

Now let's use it. In our componentDidMount, let's get rid of the console log, and use the function we placed in earlier.

newsletterEdit.js

componentDidMount() {
    this.props.fetchNewsletterWithId(this.props.match.params.id);
}

What's going to happen is it's going to go into actions/index.js and it's going to call fetchNewsletterWithId, then it's going to send that data to our action itself, and it's going in here and saying Fetch is loaded with id by passing in the id. and it'll return it in an action. Redux is magically going to dispatch for us using fetchNewsletterWithId.

Now then it's going to go down here into our reducers/index.js and it's going to say "hey where does this method existence?" So it's going to go into our newsletter reducer. It's actually going to go through all of our reducers. But then it's going to hit newsletter and it's going run action.type.

Excellent, so that should be working. There could be a catch, you never know, but in all likelihood there usually is. Let's open up our browser and check it out. Now, we don't see anything yet, but if we hit open our Redux DevTools we can see it in there, with all of the properties.

Now if we were to take 935, which is the id of our second newsletter, it should fetch and display the data, but it won't right now because it's technically a protected route, and it won't let us enter it because our user logins aren't persistant.

So now what we need to do is take this item and basically put all its data in this edit newsletter form. Let's go into our code and go to newsletterEdit.js. Now we have this item in our store, so let's take it in with mapStateToProps.

newsletterEdit.js

function mapStateToProps(state) {
    const { newsletterToEdit } = state.newsletters;
    return {
        newsletterToEdit
    }
}

Now the reason we don't do this in new newsletter form is that we're not always going to have an item I mean it doesn't really matter but we've done it this way so let's do this. So let's write it out.

newsletterEdit.js

render() {
    return (
      <div className="new-newsletter">
        <NewNewsletterForm
          newsletterToEdit={this.props.newsletterToEdit}
          onCancel={() => this.onCancel()}
          onSubmit={event => this.onSubmit(event)}
          title='Edit Newsletter'
        />
      </div>
    );
  }

So now let's go to newsletterNewForm.js and add in a constant. We're also going to rename the title on our form to formTitle

We'll also need to change our props in newsletterNew.js and newsletterEdit.js to say formTitle=.

So now let's just take this data and let's just log it out the console for now.

newsletterNewForm.js

const { handleSubmit, formTitle, newsletterToEdit } = this.props;
if (newsletterToEdit) {
    const { title, body, imageUrl } newsletterToEdit;
    console.log(title, body, imageUrl);
}

All right let's open our browser and you'll see that it prints undefined it first but then you'll see that it's all in here.

So let's go map it up real quick and then end the video. So go to newsletter-new-form and let's get rid of the if statement. Now we'll go into the browser and see if it's still working.

const { handleSubmit, formTitle, newsletterToEdit } = this.props;

const { title, body, imageUrl } newsletterToEdit;
console.log(title, body, imageUrl);

And it is, so cool. So let's go back into our code and let's get rid of the log and let's commit and go to the next video.

git status
git add .
git commit -m "continued building newsletteredit feature"

See you in the next video.

Resources

Code at this stage