Check out a free preview of the full Redux Fundamentals (feat. React) course

The "Action Creators" Lesson is part of the full, Redux Fundamentals (feat. React) course featured in this preview video. Here's what you'd learn in this lesson:

Steve demonstrates creating an action creator function which will set a constant value to an action object that can be used instead of repeatedly writing the full action. Using helper functions can help reduce code repetition by avoiding repeatedly typing out the entire object and errors due to typos.

Preview
Close

Transcript from the "Action Creators" Lesson

[00:00:00]
>> The other thing that we will see a lot of times is this is a pretty simple action type. But as we made more complicated ones ,okay, maybe we need to take multiple arguments and put them in multiple places in the payload. We might find ourselves just using a function to create an action on our behalf.

[00:00:16]
This is also helpful because yeah, if this action were to grow.Later in workshop we'll see some that you have like a few different properties. Just the more typing, I'm very lazy. The more typing I have to do, the more likely I am to make a typo. That typo could be one where I just don't see it at first and lose half of my morning.

[00:00:34]
So one of the things that we're able to do is, we get a lot of times make a, what's called an action creator. And an action creator is a very fancy word for a function. So I could say, anchorman and that could be a mountain. But maybe it doesn't have to be.

[00:00:50]
We can even say it could be as simple as. And this might be what I choose to use throughout my application. If we want to set a payload, I can say something like amount. And it could do. And we could use the amount if later that needed to become an object, I could change it as well.

[00:01:17]
One of the reasons why this pattern is so powerful, despite being so simple is let's say you wrote those objects everywhere. You're like, no, I don't mind. I'll write curly braces type increment, it's fine. Later on, you want to change a feature. Good luck, you now have to do a like search to your codebase for every time you wrote that object.And go looking at them, change them all by hand.

[00:01:39]
If you wanna change the format of your action, you use an action creator, you are able to just change that functions. Somewhere and everywhere that's using it, we'll get the new action type, right? It's again giving yourself that helper an abstraction, to make your life easier.And not necessarily because someone told you have to.

[00:01:54]
But doing it because you want to and because you see value in it, cool. So, we saw with a command, we can also make one called like add, which will kind of show you the same basic idea.This one will actually take what we had in increment. Put it in here, we'll make a new.And I can mix and match my action types.

[00:02:21]
I shouldn't but I can. So we might create action creators for all the different things. So, in the reducer itself, right now we just need to deal with any cases that we care about. And again, a shocking about of redux in just Java Script, right? This is just a function where two objects are going in.

[00:02:45]
So we can go ahead, like here we're looking for the type increment.Here we might say if we wanted to base it on a payload, we might say action type is add. And we'll say in this case state is state.value + action.payload, right. So now based on whether the increment or the add and obviously we could add things like decrement, or set and stuff along those lines.

[00:03:13]
We can add stuff in as well.Question.
>> Yeah, the initial state is value and zero and you always returning like, different objects.
>> I am yeah, I should actually be value as the key. This is why you pair program with a half a dozen of your closest friends, to catch just silly mistakes that you might come across as you are both talking and typing, at the same time.

[00:03:40]
So this is an object that has the same shape here as well.Value and so we're just taking state.value and implementing it right. You could break this out as well, onto a different line and put it in there. So we could say again, it is all just JavaScript. So there's nothing stopping you from doing that as well, is we are simply modifying the object based on what happened.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now