- [Narrator] In Redux, the store is only intended to manage state data. You can read current state from the store or mutate state by dispatching an action. The store should not contain any application logic. This means that your store and your reducers should not be involved in any of the following tasks, generating unique id's, reading or writing data to a persistence layer, mutating Global state, changing Global variables or fetching data from a rest endpoint or socket server if you had an Ajax request.
Your application should use the store. The store should not be your application. The store simply contains the data. So where's our logic supposed to go? The answer is action creators. Action creators are functions that create and return actions. They allow us to encapsulate the logic of our applications using functions, not objects. Let’s demonstrate how using an action creator can make dispatching an addDay action much easier. So action creators are functions that would encapsulate the logic.
And I am inside of the index.js file, And because I'm going to be using action creators, the constants, I don't need it anymore, those will be imported inside of the action creator file. And action creators are just functions, so I'm going to go ahead and see what it's like to use an action creator, before I actually code it. So let's go ahead and add the addDay from and we'll create a file called actions.js. So what I would do is import the action creator function.
Now this function returns an action object. So, instead of sending an object to the dispatch function, I'm actually going to invoke the action creator inside of it. So store.dispatch and we're going to dispatch a new addDay action using the function. Now the action creator makes it a little easier for me. I don't have to write as much code. This action creator will take in the arguments required to add a ski day. So I'm going to go ahead and say that this day was at Heavenly and its on 2016-12-22, and we could additionally add whether it was a powder day or whether it was a back country day, but we can also handle that within the function.
I could just default those variables to false, making it much easier for me to dispatch this action. So this makes our code look a little bit cleaner. So now, let's go ahead and code this addDay action creator. I'm going to go into my source folder, and I have a file called actions.js, and from this file, what we're going to do is we're just going to export a function. Action creators are just functions. And that function, we named it the same thing as the action creator itself, and it expects a resort, date, powder, and backcountry.
But we can default both of these to false, making them optional. And what we want to return in this function is an action object. So the function itself returns the action object with the type and its an add_day action and that's why with the constants are in this file, and now we can put together the payload, based off of the arguments that were sent to this function. So the payload is going to be an object that has resort, date, powder and backcountry.
So additionally, action creators are functions. If we had any application logic, we could add it here. So if we wanted to write any other code that we're not allowed to write in reducers, we could add that here. This action creator only needs to return the actual object itself, so I'm not going to add any additional functionality. Now I'm going to go over to my terminal and I'm inside of my exercise files, Chapter 4, 4 1, in the start folder. I've already installed the dependencies, so I'm just going to go ahead and start the dev server by running into npm.start.
And we can go over to the browser, so now I can hit localhost:3000 and I'll open up my developer console by holding command option and J, and we can see that we have dispatched an action. We actually added a day. So we've gone from zero ski days to one ski day, using a function as opposed to dispatching an action object. Let's go ahead and create some more action creators. I'm going to go back into my actions.js file. Let's create an action creator for removing a day.
So here are three action creators, they're all functions, they all do the same thing even though we've declared them differently. So I'm going to go back into my index and use my other two action creators. Let me first import them. removeDay and setGoal. So we will go ahead and dispatch a removeDay action and we can do so just by removing the day that we've added here. Going to go ahead and copy this date.
Let's go ahead and set a new goal, and we will set a goal of 55. So as I save this, the dev server should rebuild my webpack and I should be able to come over to the browser. It looks like I have an error. Maybe I just spelled dispatch wrong. Let's try this again. Sp again, saving this, the development server automatically rebuilt my bundle and we can see that I am dispatching three actions. So first we add a day, we go from zero ski days to one ski day. Then we go from one ski days to zero ski days when we remove the day.
And then finally, we set the goal, the new goal is 55. So I was able to dispatch all of these actions using functions as opposed to dispatching the object directly.
- What is Redux?
- Building object and array reducers
- Combining reducers
- Creating a store
- Creating middleware
- Building action creators
- Incorporating React components