Complete React Tutorial (& Redux) #43 - Action Creators

Key Takeaways

okay now my friends so currently inside this post details component when we dispatch an action down here we're creating that action directly inside the dispatch method and that is absolutely fine it all works however to achieve a better separation of concerns and to make our code and actions more reusable a lot of developers would prefer to use action creators to create these actions in separate files now action creators are just functions and what they do is they generate an action force and then when we call that function if we were to call it right here it will generate an action for us and return it right here so we can dispatch that action now it might seem weird at first but this is going to help us with asynchronous code later on definitely and also if you wants you to dispatch the same kind of action from different locations you could do that easily as well because we've got one action generator and we don't have to re-type out all of our actions we can just call a function so this is what I'm going to show you in this video to begin with we'll create an actions folder down here and then inside we're going to create a new file and this file is going to be called post actions so anything to do with a post would be going in here now we're just going to create one action created to begin with and that is going to create an action to delete a post it's going to create an action which looks very much like this think of a hit so we'll say export first because we want to export this const and then the function called delete post so that is equal to an arrow function we're taking the ID as a parameter remember we need to include that in the action and then all we return is an object and this object make sure you spell return correctly this object represents the action that we're returning so it has a type and that is going to be delete on the score post and also it's going to have an ID property and it's going to be equal to the ID that we receive right here but again remember may be of es6 refactoring if we have a property and value which are the same name we can just say this and that's going to do the same thing so that's all there is to an action creator we're just creating a function which is returning an action so now what we could do in this file is we could call that function right here so instead of writing out this by hand we'll call the function but we need to import it first of all so at the top of this file we want to import and it's called let's just have a little log delete post so when it's time not there and we want to import it from and then we have to go up out of the current directory because this is in the components folder so dot dot forward slash then we want to go into the actions folder and then we want the post actions okay so now we've imported this thing right here this function which generates an action for us so down here we can use that function we can just call that function here so delete post like so and we compassing the ID which we receive here because remember this action creator expects that ID because it passes it right here to the action so all this now should work exactly the same and if we try it it should still work so delete and it works really it works delete it works cool so that's all still working and you might be thinking this at the minute is overkill but again the more you use dispatches in different components the more you'll be using action creators like this and especially when we come to do more complex things like asynchronous tasks to go out and grab some external data