Complete React Tutorial (& Redux) #36 - Redux Actions

Key Takeaways

all right then so we have at the minute our store created right here and we pass in our reducer so the store knows which reducer is going to interact with it and the reducer is just a function it takes in the state which represents the state of the store and an initial value which is the initial state of the application and also an action right here so remember if we want to edit the data in the store we don't edit it directly we go through a process we first have to dispatch an action into the reducer so it takes the action then down here we look at that action and change the state on the store based on the action and remember we have access to the state so this is where we can update it okay so let's go ahead and create an action so an action is just a JavaScript object and it has a type property and that describes the action and it also has an optional payload of data so for example let's create a new action here we'll store this in a constant and we'll call it Todo action so the idea here is that we're going to add a new to-do using an action so we'll set this equal to a JavaScript object that's what an action is and it has a type property now normally you see the type in capital letters and it's descriptive so I'm going to call this adore to do like so so that describes the type of this action what is it meant to do we want to add a Todo so that's what it does right there that's the thing that describes the action then we have an optional load of data if we want to and we can call this whatever you want I'm going to call it to do since that's what we're adding and I'll just pass as the value to this a string which is by milk okay so what we're doing here is creating an action which we're going to pass into this thing right here we're going to dispatch it and that basically means we're passing it into the reducer the reducer can therefore take that action can see that it's an add to-do so it knows that we want to add a to-do now to the state and we know the to-do it needs to add okay so this is the process now we've created the action here but we're not doing anything with it yet we need to actually dispatch the action so the way we dispatch an action is to take our store that we've already created first of all so let's do that and then use a method called dispatch like so now in here we the actual action that we want to dispatch so I could pass in here the Todo action like so okay that we've just created so I'm saying I want to dispatch this to-do action which means send it to the reducer therefore this function is going to run we have access to the action now which is just this thing that we passed in and we can do something with it so for now let us just console.log the actual action that we receive and we'll console the log the state which is this thing that we're taking in and remember initially it's this all right okay so if we try to run this now what do you think will happen well the console is over here on the left I'm going to save this first of all then I'm going to run it and just watch what happens on the left over here we get this logged first time round so that's the first time the reduce actually runs when we create the store and pass this function into it so it runs once before we even dispatch any action right and we get that object right here of the state because we're logging it to the console so the second time it runs is when we dispatch this action and you can see down here we get that object and the state is still the same because we've not edited that but we also get this thing right here which is the action we get the to-do which is buy milk and the type which is ADD Todo all right so typically what we could do is use a dispatch from a component to update the state that's going to go to the reducer and do something with the action and maybe manipulate the state so now we know how to dispatch actions let's in the next video come inside this function and actually change the state of our store to update it