Normally we would start with actions but I think it's important that we start with reducers given the type of application we're building and the functionality we want. I think that showing you how reducers work first will help you better understand what we are to do to get this working and to understand how Redux works. So if you were to head over to Redux and you head over to actions

here it tells you that Actions are payloads of information that send data from your application to the store they are the only source of information for the store. You can send them to the store using store.dispatch(). So an action allows you to tell a reducer to change something about your state like remove this or adding a new to do with this text. It is a way to tell your app to do something you don't want to actually modify any of your data in your actions. Now if you click on reducers

like I said we're going to start with these so as you can see you for the SHOW_ALL In the to do app they're explaining, they are returning some todos with a text and a completed value.

And we're going to be doing the same thing except for with the class of course so we're going to have the title and we're going to have the description and we're going to have a couple of booleans as well later on to determine whether or not we are enrolled in the class. So basically the idea of a Reducer is to specify how the application state changes in response to actions sent to the store. Remember the actions only describe the fact that something happened but don't describe how the application state changes. That's where reducers come in so actions tell the reducers what to do. We call an action and then we say hey we want to ADD_TODO and then it returns and then we dispatch it to the reducer and then we add a to do in our reducer. So I'm not sure where their example is in here adding a todo. Looks like it's right here.

We're going to be using a little bit more clear of a syntax they're using object.assign. We're going to purely be using the spread operator if you're familiar with that and understand that and that's good. So back to what I was saying we send an action we dispatch it to the reducer and the reducer changes our actual data so if we were to have our app hooked up to an API and we say okay we want to fetch some courses we fetch those courses in an action our API call in an action and then we return the promise for example and we take the payload of that promise and we assign it to our application state.

So actions simply are payloads of information that send data from your application to your store so we fetch our data we fetch our courses in the actions and then our reducer says okay let's take the data from that response and let's put it into our local database. So we're are not going to be putting it back into the database in our back end we're going to call it within our action. We're going to get the information we receive back from the database and then we're going to store it into our local database. We're going to store it into our app which is our store and that's a whole entire point of Redux is to give us a way to manage our local data and kind of separate it from our user interface. Kind of give us a another level of clarity so we can understand what's going on and specifically so we can use that application data that state across all kinds of components and not just in one particular component and you might be wondering ok well we can just pass that through using props and then access in the constructor or something or anywhere else on the component but that gets really inconvenient when you have a component that contains a component that contains another component because then you have to pass data down multiple components where as if you have access to a global state and you just have to dispatch an action to return you some data or modify that data you can do it immediately and you don't have to pass it down components and generate all that confusion. So let's go ahead and implement something similar to this in our app except instead of to do let's do our courses.

*******18:30 So back in our code let's go ahead and create a file in our reducers and let's call this file courses dodginess and in here we want to basically implement something like this a function. So if you go to index digests you'll notice that it says stay and then there is an arrow function. All right. So what we want to do is provide access to a function. We are going to write in here so to write this function all we have to do is to have an export default function and then we want to set state to nothing and we want to pass it in action. And you don't really need to worry about this but basically I'll just explain it anyway. The way the reason we're passing in an auction is because in the case which we are not doing in this video yet we will be doing a next video in the case that you dispatch an action. It's going to need to come into this reducer and determine what action you took with which action you dispatch so you can get the appropriate data and make the appropriate changes such as remove ad had and to do so for right now we just want a default case. And we first have to write in a switch statement and this is so we can switch through our action. So action not type. And then we want to provide a default case of returning just to use. [00:07:51][114.4]
[00:07:53] So we have our title or description and Object objects so normally if we in the next app or the next guy I believe we're going to be doing this and the next time we might do a couple of guys down the road. But normally what you do is say okay action switch if action type is equal to is equal to fetch fetch courses and then we do something based off that or you are removed to do. But in this case we're just going to return this you can understand kind of where we're getting our data and how that works. So backmarkers library. Let's go ahead and let's copy the description. Let's actually copy the entire object. So starting out this bracket here just go all the way over and copy that out to copy and paste it right here and then do the same for this one copy and paste it right above it and then comment out these two calls to render course. Now take this out we don't want this here. So cut it and go back to our courses reducer and we want to put those objects here saw or remove those brackets put them here and then we need to adding a comma here to separate these objects and to make this a lot more readable return after that bracket and return at the beginning bracket and do the same for this object and also do it after each attribute. So they line up. So you might be confused but you'll be able to see where this is going in a second. [00:09:41][108.8]
[00:09:44] So you can kind of see that we can read our objects a lot nicer now a lot easier by bringing those returns. So and that's exactly what they do here. All right. So we have a producer and we are returning the title on the description. Now how do we access this data. So in our index digest we can import this function. This reducer we can do it by typing in import courses releaser from Doxil slash courses 0 8. Now we have access to that reducer and we don't need this to reduce or a here we don't need this function because we are getting this function so cut that out and typing courses and courses reducer. So now we have access to our courses or at least we've set up our stores so we kind of have access. Now we just have to point from our Eichorst library component to the reducers so we can use our courses know of course library. And for any other component we need access and access this and later on we are going to create a schedule component which accesses the same exact data. It's just that we are displaying it differently based on different conditions and the specific component. But we're getting the data from the same place. So back in our code we have that set up. Now let's go back to our course's library and let's get the data in here somehow and the way we can do that is by utilizing Kinect from reactor X so type an import connect Crome react redux okay. So now when we have access to that we can use what is if you command clicking to connect you can read around here and I do this all the time. [00:11:51][126.9]
[00:11:52] I always go through documentation or the actual source code because it helps to really understand what's going on and 90 percent of the time it's really confusing but you can get a general idea of how a lot of this works. Even if you don't fully understand what's going on by command clicking into objects much like we did in the birthday Countdown Out When We command clicked into the data object they think it was or the component lifecycle methods like component and we can even do that now because you know I'm talking about a new day. Oh yeah. Well for some reason that's sorry. Anyway let's get back to redux and so connect now what we want to do here is we want to basically connect our global stage to our components. So we want to take our entire app state which is our producer here reproducer and we want to have access to these courses. It's the way we can do that by typing in export default connect and then type in maps state to props and then right after that in another set of parentheses type in the course library component. Okay. Now this takes another argument and you may have found that if you clicked into connect and we don't want to provide that because that's where the action is coming. And that's where we can say okay this change does do this. That's right crimsoned but we're focusing purely on road users and getting the content from our store back into our app like it was at the beginning and beginning of this video just in a different way. OK. [00:14:02][130.0]
[00:14:03] So one thing I really want to point out before I move on is you don't want to have data in here ever. The only reason I'm doing this is because I want to explain it to you and help you understand what's happening. We're basically skipping an entire step here which we will get onto later on. Next step is the action which is where we fetch the data and then the data is in here and then we have access to it right now. Just don't do this again unless you're practicing or trying to understand. But we are just going to return this hardcoded data here and access it that way. So now we need to actually declare this Mopsy props function type and function and this make sure this is outside of your current library and if you've done any reading on what container components are then this will make more sense to you. And this is basically a container and we will be explaining it later on as well. So maps data props and then we want to pass and state which is our application state the entire local application state. And then here let's go ahead and map our state props. So first let's console log what our status console and all log. I would say stay. What is the state what does that mean. We haven't said Steen or constructors so it could be in a state so stay and then add a dollar sign so streaming circulation and type in Jaison and a string of I state. Okay. So going save that and it might have an error still isn't there. [00:15:47][103.7]
[00:15:47] So how to return a plane object instead this received undefined ignore that for now what you want to look at is that our state has what we want and it has our courses. So this can contain other objects but right now it only contains our courses. So let's go ahead and let's access those courses so let's say Okay stay courses are essays on this. If I stay on courses save that was actually quote out of it. And now you can say OK six courses are title description we have our objects. OK. This is exactly what we are returning here in the index or in the courses digests it's exact it's returning this object right here and we have access to it. Literally the exact same thing. We are a copy this it probably wouldn't look the same because it's formatted a little from what the returns but it's the same exact data. OK. So back in here. Let's go ahead and return something like this air is saying it says maps props promising connect of course library must return a plane object instead received undefined and the reason we want to do that is so we can have access to our courses in profs which is exactly what the title says. The props can return courses state DOT courses and the reason I'm saying courses right here so we can in our state or local state or even more local state or component state. Here we can say okay this thought process stuff courses. So basically just think of this return as for now this isn't how it entirely works but basically think of this as saying okay this course library. Imagine if this function were to be in here we could say this but it's not. [00:17:52][124.6]
[00:17:53] So we could say okay this dot props is equal to state. That's basically what's happening and what we can't do that because it is outside. So basically we're connecting it to this component and it's containing all of that. So it's a container containing a component and map the maps the props and the actions later on. Dispatch state props. Anyway let's go ahead and make sure we're turning this again. So return courses state courses. All right now let's go ahead and enter code here. Since we haven't commented out now all we have to do is go through our courses and Carender course and we can do this just in vanilla javascript instead of using load ashes time by saying this does stay da props or this dot props dot courses Daughton that and saying Dizdar render course and make sure this is in brackets. I always forget that and it should render out our content. So let's go and say that and wait and see what happens. Okay so it says upgrading in and with red of course description in this course you'll learn. Yeah it's gonna be average. You'll also notice there's nurses each child narrator and readers should have a unique key prop and we've had that before and the way we can fix that is extremely easy. All we have to do is give this a unique value and render course so we could say we could just say key is equal to. We could put a course job description and that would be. Unless you had the same description. [00:19:40][107.3]
[00:19:41] So you wait for that we don't get the error but just to explain this a little more back and our producer here and this has nothing to do with redux this is just something so far to copy this with the same data. Yeah I thought it would get the same error. Saying they need unique keys but I guess they made it even smarter and it tells you what's going on. So encounter two children at the same key. This user experience corps examines how to live anymore and even read that. But basically we need a unique value for each of these items so we can what we can do is trying to think of a good way to make this unique. So great because I didn't fix this air when I was doing it. Let's go ahead and let's say we kid there's a couple of ways we can do this we could say this index plus plus and then open our constructor we can say. Or better yet Inari render function. You can say this stock index is equal to 0 and that would work. I'm pretty sure yes that works and the reason that's working is because we're saying OK it's zero every time renders Nederlands and it's saying OK zero. And then it's iterating. It's incrementing it so it's saying k now indexes 1. Then it goes back again says k now and X is 2. So it's giving you a unique value. Not that works but I don't think that is a very clean and clean way of doing it clean method of doing this because that's. Yeah it's not good. People are going to be wondering what this index is. [00:21:29][108.6]
[00:21:30] If you're working on a project with other developers so let's try and think of another way we could do this. We could say course that title would work. Let's just stick with that for now. Think of a better way to do that. We will come back and fix that. But this is going to be unique since we don't have any other since all the titles are going to unique on the courses. All right. Now if you're interested in this theme I'm using just because I only clicked this reminded me. It's called blueberry dark theme I think it's Superclean. You can check it out and install it if you want and then I'm using an icon pack I can't remember it's called it's called the material icon theme. And basically it just gives you all these icons for certain types files. It makes things get a little confusing sometimes not as minimal but I like it a lot. So those are the extensions I'm using to get this new look. All right so let's go and do this and in the next guide we are going to learn about actions and how we can set up a fach courses action that will provide us with this data and basically put it into our reducers so we can use it. So again we're not going to be changing anything. I think I said in the last get that we would be styling this up a little bit and this guy and I hate to tell you but I lied we're going to be doing that later on. So that's what we're doing in the next guide the actions. [00:23:26][115.8]
[00:23:27] Let's go ahead and commit our code to get status get that key commit if you want to read this up. It says modified these two files and added this file. If you're curious too as to how you can see the differences of the files before committing you can just type and get death to apps and maybe you can't do that after you. Okay so next time we me change code I'll show you. So I'll just do it now. Change that typing get diff and you can see it says Okay change this in this file and you need to type q to quit out of that. Let's change that back so it's back toward added code. Now I can type and get status and we've added it so we can type and get a commit with a message and say interviews redox to created courses releaser get Polish origin master and I will see you all in the next guide. [00:24:41][73.8]
[1467.4]