Handle Actions in Redux with mapDispatchToProps
We need to get our dispatch functions into our components in order to respond to events in Redux. Connect’s second argument is a function called mapDispatchToProps and it does exactly what the name implies. In this lesson, we’ll use this function to get our dispatch functions into our components via props and refactor to use these functions accordingly.
[00:00] Using the provider component and the connect function we've wired up the state from our Redux store as props in our connected app component. In our entry file, we're still manually passing in our dispatch function. Let's refactor this code and handle our dispatch functions like we're handling our state.
[00:14] I'm going to start by moving the imports for the update current function from our reducer and bind action creators from Redux. I'm going to cut those out of my entry file and I'm going to move into add.js, and add those to my imports there.
[00:29] Now back in index.js I'm going to take this actions that I'm creating by calling bind action creators and I'm going to cut that and I'm also going to move that over into add.js. I'm going to scroll down it here and put that under my component definition and then back in index.js. I'm just going to update this reference to the app component and remove that passed in prop.
[00:53] I can save index.js and then back in app. Let's finish updating our code. We're using a function called map state to props as the first argument for connect. Connect takes a second argument called map dispatch to props. Let's define that.
[01:13] Map dispatch to props is a function that's going to accept the dispatch method from our store. Then it's going to return an object that contains dispatch functions just like bind action creators does.
[01:29] I'm going to come up here and I'm take this bind action creators call. I'm going to cut that out, get rid of actions, because we're not going to need that anymore. I'm going to paste that in here, and I'm just going to get rid of the reference to store because dispatch is being passed in as our argument here.
[01:44] Now that we've defined map dispatch to props let's pass it into connect as our second argument. With that done we can save this and our browser will reload. What's going to happen is it's not going to work, because changecurrent is not a function.
[01:59] In the previous version of our code we were passing this updatecurrentaction function in with the name changecurrent. Because we're using that dispatch to props here and all we're returning is an object with update current as the key and value, that's what the property is going to be named.
[02:16] I could add the key that our code is looking for by adding it here, or if I want to keep this nice and short all I have to do is go into my component and update this to use updatecurrent. We can save that and now our component works as expected.