3.7 Challenge: Action Creators

In this challenge, we need to create action creators. So we need the functionality that whenever you enter a Twitter handle into the input box and click the button, the correct Avatar for that Twitter handle should appear above. And we have a TODO list here, so we're gonna go through this TODO list. If you want to do this challenge, go ahead and fork the code pan and work out your own solution now. Otherwise I'm going to go ahead and fork this and I’m gonna show you what my solution is starting right now. Okay, so let's go through this TODO list that somebody has conveniently left here. Create an action creator, add support for the action creator to the reducer. Then write changeHandle prop where you render the profile and then write the handleClick method in the profile. Okay, so what do we have here? We have our store, which is being created with Redux. We have our Redux store passing in our simple reducer function here. We have our TwitterAvatar component that we've seen before. We have our Profile object here, which has an empty handleClick function. Here we're rendering our TwitterAvatar, our input, our button. When we click that, handleClick will be called. I don't think it's necessary to have this. Not sure why I put that there, cuz in React.createclass classes, that's bound automatically. So we're good there. And then we have store.subscribe here. Whenever something changes in the store, we get the state and render it, we pass that state.handle to the profile. And then we need a changeHandle function here as well. Okay, and then of course we just start our store down at the bottom by dispatching an empty event to it, very good. So let's see. What do we have to do first? Create an action creator. So this is gonna be a function that just returns an action. And our action objects, as we know, are going to have a type, and they're also going to have a data property or some other pay load that is whatever data goes along with that action. So up here we can create a simple function and we can just call this action setHandle. And this is gonna take some kind of data and it will return an object which has that data as a property. And we also need a type, I guess our type is going to be SET_HANDLE, okay? So this way we can convert just some raw data into an action for that data. So now we need to add support for this action to the reducer, right? Because our reducer function here is going to receive this action as its second parameter. And if the action type is SET_HANDLE, what are we gonna do? So we'll create a case statement here for SET_HANDLE. And we can kind of get an idea of what our state looks like by looking at the default here. We can see that by default, we have an object which is just a handle property, and we set that. So we could just go ahead and return new object for our state here which will have that handle property. We don't have to worry about copying over any other properties, cuz this simple app just has one property handle. And that's in action.data as we know, okay, very good. So it looks like we are halfway through. We've created an action creator, and we've added support for the action to the reducer. So now we need to write the changeHandle prop, where you render the profile. So where we render profile is down here in ReactDOM.render. changeHandler here, we assume we'll take that handle that needs to be changed or whatever the handle is gonna be changed to. And what it needs to do is dispatch an action to the reducer. So what could we do here? Well, we'll replace this function with a function that takes that handle, and then we can create our action from this handle by calling setHandle. Right, so we'll call setHandle and we'll pass it the handle. But this doesn't actually do anything other than return our action object. So we need to pass that object into our store. So what we can do is say store.dispatch and we will dispatch this action to our store. Okay, so there we go. Our changeHandle function here takes some new handle and converts it into an action with our action creator and then sends it into our store. Which we know is gonna work because our store now expects to manage a setHandle action. Okay, so now what's left is to actually call changeHandle somewhere. So presumably we want that to happen when we click this button. And so inside of handleClick here, as you can see that's the last TODO item, right handleClick method and profile. So let's go ahead and see what we need to do. So in here we know that our new handle is going to be e.target.value, and so we just need to pass that to this .props.changeHandle. So let's see. Now we don't even need to set this to a variable. Let's just say this.props .changeHandle and we pass it wherever that value is. All right, so it looks like everything's good and we'll go ahead and save this and okay. So let's try this, let's type in tutsplus and I'll click Get Avatar. And we get nothing, that's a little bit weird. So let's see if we have a bug here, I wonder. Well, if we right-click on this and inspect it, let's look at the image URL. Okay, you can see here that right in between those two slashes where we were supposed to have our handle we have nothing. So for some reason our handle isn't being set. Let's see if we get our handle here instead of our setHandle. Let's just do console.log(action) and let's pop open our console here, all right. And let's give this a go. So if I type in tutsplus and I click Get Avatar, okay, so you can see the problem right there. Our data is for some reason blank. So let's follow this back. This is coming from our function down here, where we have setHandle, we pass it this data. So for some reason, this is an empty string, which means this may be an empty string as well inside changeHandle. So we're calling that right here, e.target.value. Okay, I see where the problem here is. So the problem is that the target is our button. The target that we're looking for is not the button but instead this input element here. So we can get this input element by using the ref here. So we can say instead of e.target.value, let's say this.refs.input.value. There we go. So that should work. So now let's go ahead and we'll say tutsplus, Get Avatar. And you can see that the data is now tutsplus and the avatar is also tutsplus. Let's try Andrew8088 and click Get Avatar. And this is really weird, why is Twitter not serving my avatar? I mean, that is my username. You can see it right up here. Anyway, let's try one more Facebook and we can get the avatar and that works just fine. All right, very good. So we successfully created an action creator. And even though this application is pretty small, this shows us the complete life cycle of data inside of a Redux application. We have our Redux store, which knows how to manage our state based on actions. We have action creators, which take raw data and convert them into the actions that the store expects to receive. We can dispatch actions to our store, using store.dispatch, passing it the action, and then we move to the React part, where throughout our application, we can call store.dispatch. Often we're not actually directly calling store.dispatch. We're calling it through some other function. But however it happens, that action is dispatched to the store. So that was the action creator's challenge. Excellent job.