Creating Action in Redux
In this lesson, we're going create actions
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:04] So, now we see the data on screen. But it's not just about displaying the data.
[00:05 - 00:10] We should also be able to update it. We can do it with the help of 3Dix actions.
[00:11 - 00:20] Whenever the action is ran, it re-renders the application, which shows us the updated state. Let's start working on it right away.
[00:21 - 00:27] In traditional Redux, there are actions as well as action types. Action types are nothing but the name of the action being called.
[00:28 - 00:35] So, let's create one for our experiment and let's create it on top. And I will call it updatevisit.
[00:36 - 00:52] So, export, const, updatevisit and let's give it the same value. So, I'll copy it from here and paste it.
[00:53 - 01:02] Usually what happens is we have a separate file for all the action types. Then we have a separate file for the actions and a separate one for the redu cers.
[01:03 - 01:12] We call the action type to check what kind of action we want to use to update the state. It generally happens with the help of switch statement.
[01:13 - 01:33] We can also do it inside the login reducer. So what I'll do is use the switch statement here and let's use it from VS code and the case will be action.type and the first value will be the updatevisit.
[01:34 - 01:49] So, whenever this condition is there, our updatevisit will add one to our current state. The most important tool we have in Redux is to never mutate the state.
[01:50 - 02:10] So, we can't use it directly. What we can do is return and use a spread operator which will give us copy of the data and here I can use visits and state.visits plus one.
[02:11 - 02:17] By doing this, we are not mutating the state directly. We are making a copy of it and making changes to it.
[02:18 - 02:36] And the default case I can simply return the state and can get rid of this because in any other case, our state will be returned. When we use the action, we usually call it dispatch and Redux terminology.
[02:37 - 02:53] So what we can do is go to our login page and use dispatch. Let me dispatch variable and grab it from use dispatch which is provided to us by React Redux.
[02:54 - 03:05] The action type that we created is what we are going to use to tell our reducer what to do. So, when we are using updatevisit, we are telling our reducer to update the state by one.
[03:06 - 03:26] So, what we can do is use this dispatch when the page first renders. So for which we can use the use effect hook, what we can do is use dispatch and inside an object, we will provide a type and the type is called updatevisit.
[03:27 - 03:36] And as a dependency, we can use dispatch. So now what will happen is we use the dispatch with type updatevisit.
[03:37 - 03:52] It will call our reducer and it will check what to do with it. It will match the action type and it will return a new state to us and this state will be displayed to us here.
[03:53 - 04:00] Like I told you before, whenever the state changes, our page re-renders. So what else we can do is create a button.
[04:01 - 04:27] Let me cut it and we can use our h1 and below this, let me create a button which will say increment and it will use the dispatch event as well. So, we can use on click.
[04:28 - 04:49] And here we can use dispatch with type updatevisit. Now let's go to the browser and go to the login page.
[04:50 - 04:58] We see the visits are two because our initial state is one. Also, if we click on the button, we see the count is increasing.
[04:59 - 05:06] Well, this shows how the actions work in Redux. Now let's talk about action creators.
[05:07 - 05:17] So the action creators are simply functions which return action types and that 's it. Right now inside our reducer, we are using a default value 1, right?
[05:18 - 05:27] But what if I want to increase the visit by five or sometimes by 10? Action creators are mostly used for this in Redux.
[05:28 - 05:59] Let's create a function called increment. So export function and we'll call it increment and this will take amount and we can pass a default value to be one and inside it will take a type which will be updatevis it and a payload which will be the amount.
[06:00 - 06:17] And of course, now we are going to return it. And now rather than hard coding it to one, I can simply use action dot payload.
[06:18 - 06:33] Inside our login dot dsx file, we can use the increment function instead of using this object type. So what we can do is call increment from login reducer and give it a value five .
[06:34 - 06:41] We can get rid of the updatevisit because we don't need it now. Also you can get rid of the use effect hook.
[06:42 - 06:49] I'm sorry I forgot to record it but yeah, you can just get rid of it from here now. Let's go to the browser and click on the button.
[06:50 - 06:59] Let me click and you see it's increasing by five and it can be any count really . Now these are the basics of Redux.
[07:00 - 07:10] Now you know what our reducers, what our actions or action types, what is the store. Well the only difference we have is that we only have one single file.
[07:11 - 07:20] Otherwise in a real application, we have different files for action reducers. We have different file for action types and different file for producers.
[07:21 - 07:24] I hope it makes a little sense. Let's introduce Redux toolkit in the next lesson.