Welcome back. In this lesson we're going to make an action creator to dispatch the action fetch fruits requested. So let's get started. Let's create a new flyer here called actions.js under the src directory. So let's create an action creator to send to dispatch that action that we did here in the component did mount. So we don't want to do this props dispatch here instead we just want to call like so we're going to do this prop dot fetch fruits. We just want to call this function here that's going to be an action creator a bound action creator by the way. So let's go to actions.js I'm gonna cut this here from here and then place it into actions. Now we're going to make a function here let's call this function fetch fruits. Now this function is going to be simply a function that returns an action. An action is just a plain object with a type property and option the other stuff like a payload. So just as we're going to cut this guy here just going to return it. Okay we don't have to do this batch in this case because what we're going to do is we get this guy don't forget to export by the way and I'm just going to leave the actions like a string like so typically in the working production in a real world it would put this guy into a constant all the kind of stuff but I just keep things simple I'm just going to leave it as a string. So that this batch is going to be automatically called with this action here that's returned from this action creator if we go here in the app and go down there and we add to the connect a second argue called the map dispatch to props. Now this map dispatch to props that you define right here map dispatch to props we're going to simply return going to be simply an object okay and doesn't read it's just an object not a function in this case so we can have bound action creators that automatically when you call there call them dispatch is going to be called with their return return action so we're going to first do the following we take this guy we import it from app.js up there you do an import forget the braces fetch fruits from actions dot slash actions now we take this guy and we have to somehow inject it in app to do that indirectly using map dispatch to props so we put fetch fruits here this prop inside the app is going to be referring to fresh fruits that was imported okay this imported function is going to be called fetch fruits inside the app as a prop now since the property name and the property value is the same using ES6 shorthand you can do just like so now this guy is going to appear as a prop inside app and then we can call it like so but when we call it right it's going to do what well this function simply returns an object but we have to dispatch this action so it's going to be dispatch is going to be automatically called for us because we're using the map state map dispatch to props in this manner okay so it's called the bound action creator if you want to know more about it in the Redux documentation anyway with that we can verify that the action is being called doing like following let's say this file then we're going to go to the reducer file reducer.js and what we're gonna do here is the following here inside the definition for the reducer we're going to make a console log and then we're going to console log the action. Let me just say something here an action was dispatched just this message so we know okay so we got an action in this root reducer right if you want to get access to the state here you can also do so you know console log let me do another one just so you're curious current state is your map state is state let me put it here great now before we move on I also would like to remove this these fruits from the initial state actually I'll leave that for later okay so let's hold up on that for a little bit leave it there we just want to know if the action is being called so let's get save everything now let's go back to our browser where the app is running let's open the console what's going on web console sorry so I'm gonna clear and restart refresh so you can see there's some console logs here an action was dispatched and then the action now redux dispatches some action in the initialization it seems but we don't really care about that current app state is this we should see the initial state has three objects that's correct for now and then if you look at it it's going to be the this web props of the app you can see that patch fruits now appears as a prop for the app component and it says a function by an action creator you see it's a bound action creator okay and then we have an action was dispatched because in the component did now remember of object of type that fruits requested so we got it so it's working fine the action is being dispatched with the type of that fruits requested that's great so we're good for now all right so let's get back to our code so so let's get started hooking up the initial state and then work out all the other stuff so let's continue here let's first remove out this hard coded fruits from the initial state of the reducer because we don't have any fruits you can either put an empty list or you can put no to signify you have not you haven't made any requests yet so there's no fruits it's up you to choose which one if you choose to use a empty list there won't be any problem in the app.js if you can see here but if you choose no it's gonna have some issues right because props.frutes and snow and you're trying to map over a no value and that's not possible I kind of like that because I can see that haven't made the request so I can indicate that still in the loading state here let me put you can do it for fruit list or from app I'm gonna do it from app up to you so let me put something here so I'm gonna in the app.component I'm gonna put an if statement right here saying if props this.props.frutes you can say like so if it's not defined if it's undefined or no or falsely value right we're gonna return a div with a loading message loading list I'm say loading fruit list three dots let's see what we get so it's always gonna be like that forever even though we made a we then made it in regress right so you can figure out your own way of dealing with loading messages and with errors anyway so that's that so I leave it as no in the reducer and I put a check here and just return the loading message in case fruits not defined auto because we cannot map over a no value so what's left to do is we already dispatched the action patch fruits using the action creator it's gonna dispatch the action patch fruits requested remember that we have to make the request we're gonna go call find all and then on success you have to dispatch yet another action succeeded so we can update the application state right if there's an error you have to send them action dispatch the action patch fruits failed with an error message so let's do that in the next lesson how about that see you then