Learn React #12: Redux & React Intro - Redux Crash Course

hey everyone and welcome to today's video on redux today we're going to go over what redux is we're going to go over setting it up completely from scratch and we're going to go over two cases one is going to be a really simple case and then we're going to expand the application to be a bit more complex so you guys can really see how redux works and what its core uses are now if you go to the redux documentation its sort of tagline is a predictable state container for js apps and that could be a bit confusing especially if you're a beginner in react and you've gone through all my previous react tutorials you've sort of gotten to a point where you see how react works but when you think about adding state management libraries like redux or any other state management library you might have heard of like mobx it might sound a bit confusing on what it does and i personally don't think the home page that you know pitches the toolkit sort of helps that much either so i'm going to try and simplify things as much as possible if i were to click getting started on this redux page you would see there are two different things you could do number one is you can install the whole redux toolkit or you can install the redux core and pretty much build your app from scratch in today's video i'm going to show you guys how to do it from the redux core which will show you all the underlying workings behind redux and the redux toolkit was really made so you wouldn't have to worry about the nitty gritty details but i think once you know about the nitty-gritty details and you set it up once it's sort of going to be really good for you moving forward and setting it up again in the future and just a reminder if you find value in this video please consider leaving a comment liking subscribing and hitting that notification bell so you know every time i release a video i can't tell you how much it helps with the youtube algorithm and it really really helps get these videos out there to more and more people like yourself so let's just jump straight into it redux if you want an example of how it works i've prepared this little paint explanation so let's say that this is your react application right here and in your react application you can see i have a bunch of boxes here each one of these boxes just like the first react application i made and the first tutorial we did contains a different component so let's say this is your header component and then you have one component the green box component that contains a whole bunch of other components over here like you see now the thing about each one of these components is you already know that we can have you know a react state variable and that state variable will hold state within every single one of these components but what happens if for example i wanted to get the state of the red component let's say a state variable like count from the red component and display it into this orange component let me get rid of some of these arrows so it's a bit easier to see again i want to take a state variable like let's say this red component is a counter and i want to display the count from this red component inside of this orange component well it gets a bit tricky because this red component is nested inside this green component and then finally the orange component is a sibling so to speak of this or um the orange component is a sibling of the green component so it's a bit tricky to pass a variable all the way up from this red component to the green component then it would have to pass it to both of their parents component which is the black component our overall component and then from the black component back into the orange component and cases like this before state management libraries came around were really difficult to deal with and it made code very hard to understand especially you know when you're passing things from component to component component it gets really really messy so state management libraries are the solution to that and what a state management library does something like redux is it will allow you to have a place that is separate from those components where you can store variables that all your components can access the same way so let's say for example i wanted to store the count from the red component instead of storing it inside of this red component as a state variable i would be able to store that count in my redux store and then whenever let me fix this there we go um whenever i need to use that count in any other component well my counter component simply pushes the count to our redux store and any other component can just easily access our redux store no matter what component that is and that's what a state management library essentially is it's a place where you can store a state variable and access it from any component very easily so you don't have to worry passing variables from one component to its parent component to its parent component and then to a different child component and you don't have to worry about none of that spaghetti code now the central way a redux uh redux works is through these three things you have number one your actions number two your reducers and number three your actual state now the state is probably the most intuitive one the state is essentially where all the variables are stored so the state is essentially just a map with a bunch of variables in it for example in our previous example this component had a state variable um we stored a state variable called count in our state now actions are things that our components are going to call in order to edit that state and the things that actually edit that state are known as the reducer itself so if we wanted to increment the count our component would dispatch an action that we set up in our redux component or sorry our redux uh our reducer called increment that increment would then call that action with a trigger a function in our reducer called you know increment that would edit the state and store an incremented version of that count and don't worry if you don't fully understand how this works right now we're going to go into an example and it's going to be super super simple once you see it in action um and you'll see that the first step is we're going to mpmi redox but before we get to that i want to just have a little disclaimer the way i like to set up my uh reducers is in something called a ducks uh pattern now a duck's pattern for redux is essentially just a file structure a best practice file structure that somebody came up with because they got tired storing you know all of their actions in one file all of their reducers in one file and their state in another file it gets really messy really quick especially when you're dealing with a big application where you have things going everywhere so the way that they solve this was just by simply introducing this thing called a ducks method d-u-c-k-s and essentially all that is is it's a way to put all your actions your reducers um and your state all into one file that's essentially all it is it's just having everything in one file so it's easier to manage um it's not very complex and once you see our example of how we do things it'll become a lot more obvious on what we're doing but um if you are still confused i made a video back in february of this year on the two best ways to structure your redux apps and i showed you um in this video i think uh over here um i'll link this video in the description but i have a time stamp where i go over the docs method and um if you're still a bit confused about it after this video feel free to go and check that video out i will leave the link in the description as well as the documentation for the docs method but anyways let's jump straight into it the first thing we're going to do is mpm install redux now i'm going to be working on code sandbox as usual if you are running from vs code go into terminal and type mpmi redux over here we don't have to do that on code sandbox i will just type in redux and you'll see here that redux is a library that i just click it and it'll add it to the package.json and automatically install it now the application i have set up here and don't worry this code sandbox link will be available on uh in the description as well so you can go ahead fork it yourself and play around with it what i have here is just a very simple component something that you've definitely seen before all i have is my app.js that calls a counter and that counter is essentially just a counter it has an increment button where i can click and it will increment the count and a decrement button where i can click and it will subtract one from the count now the way that this uh the way that this component is set up is something that you've definitely probably seen before especially if you've gone through my react tutorials all we have is our component uh counter then we have a state that stores the counter uh the count of our counter then of course we have our increment function which we'll just set the count equal the count plus one we have our decrement function which will set the count to be equal to count minus one and then all we're doing over here is we're returning some html to structure our count so we have a div and i made the background color gray just to make it a bit more easy i might even add some margin and if you watched our last video on creating a whole react application you'll know that this is just inline styling i'm just going to create a margin of 10 px um whoops i forgot to put a comma here here we go um and that'll make it so that if i have multiple counts which we're gonna do in the future it'll sort of space these out but yeah then all i'm doing is i'm displaying the count and then i have two buttons um inside of this div and i just made the display flex and justify content to be equal to center so that they're side by side and obviously we have our increment button that just calls our increment function and our decrement button that just calls our decrement function and i hope this um font size is okay for you guys now what our goal is our first redux application what we want to do is i want to display the count inside of our app component and you can see here our app component actually calls the counter and has the counter nested but what if i didn't want to display the count inside of the counter itself what if i wanted to display it out here so for example if i uncomment this you'll see over here i have some text that says the count but nothing's here because we don't have access to that variable well one way to do this without redux is simply i can go ahead and create a count variable count and set count and then i can make that equal to react.use state initialize it to zero i can go ahead and um you know say the count is count over here and then if i want to go ahead and hook up our counter to our account variable what i could do is uh simply this i could be set i could do uh set count i could pass in the set count function as a prop and then in here instead of having uh the count in here and instead of displaying the count i'll i will just destructure the set count function from prop so cons set count equals props so here we go now if i were to click uh and oh right i should also pass in the actual account itself um so i can pass in the account as a prop as well and you'll see here that i'm able to pretty much do this just like that now for the purposes of our tutorial um just because i want simple enough code to show you how redux works we're actually not going to do this and we're going to do this through redux instead now um this is a very simple example and i'm doing this because i want to make it as easy as possible to understand how redux works and you could um just more easily with less setup to it the way that i just showed you but we're going to pretend that we want to use redux for this and our use case is going to be more complex because when you get to more complex components like i showed you guys over here you won't be able to do simple things like this because you're going to have to spend multiple multiple components you're going to be passing you know components up and down the you know parent child trees and stuff like that and it doesn't get too fun so let's go ahead and revert what we have um back to the way it was let's go ahead and just we can just go ahead and delete this and then inside of our counter we can go ahead and instead of getting all this from props again we can go ahead and uncomment this and now we're back to exactly what i showed you guys at the beginning so the first thing we're gonna have to do is set up our redux uh set up our redux component essentially um the way you first do that is the first thing you gotta do is you have to add what is known as a provider now it's a bit confusing when you see how they do this on the redux documentation because they don't sort of give you a really good um a really good direction on how to do all of these things but essentially the direction goes as follows the first thing you do is you go to your index.js and you set up a provider and if you remember our um react router videos all a provider is is it's something that wraps around your entire application and everything that is a child of it or a nested child of it will be able to access any functions from it down the line so i want all my components to be able to access a bunch of different redux components and in and redux hooks and in order to do that i have to first pass in the provider so you're going to wrap your app call in index.js around with a provider and this provider is going to come from the library react redux now this library is a really important one and you need both react redux and redux even though we're only going to be pulling components from react redux you still need redux because it uses redux under the hood and the reason there are two different ones is because redux can be used without react as a whole you can use redux in any javascript application but react redux provides some really nice wrapped components that you can use that makes working in react with redux so much easier and we're going to be using that so if you're on vs code just type in mpmi react redux and it'll go ahead and install it now once that it's installed let's go ahead and import the provider provider from react redux and let's go ahead and wrap our application around in that provider bam so you'll see here that we are getting an error that we can't read properly get property get state of null and the reason we're getting that error is because we need to first create a store and pass it in to our provider in order for it to work so the second part of the initial setup we are going to go ahead into source we're going to create a new directory um inside of the source folder and we're going to call this directory directory redux now in our redux we're going to create a file and we're going to call that file configure store dot js and then i'm also going to create in the redox folder a directory called ducks just like that now in our configure store this is essentially what we are going to export for our app provider or sorry for our provider that wraps around our app to use for the entire thing and the purpose of this file is to take all the ducts that you have and any middlewares you would want to apply to redux and we'll talk about that in a second and essentially um add that into the store so first of all let's go ahead and import a couple of things let's import combine reducers create store all from redux itself now the we're importing this from redux because these are redux core functions and we are not wrapping them around in any jsx or whatever so they don't come from react redux they will come from the redux library itself so now what we're going to do is essentially all we're going to do is we're going to create a store con store equals create store and inside of this store we're just going to pass in pretty much nothing and then we're going to export default store all right and we're not using uh this combined reducers thing just yet but let's go ahead and go to our app and let's import inside of here we can go ahead and import store from dot slash the redux folder slash configure store and oops we gotta do this in index right so let's go ahead and import that in index and inside provider we're to say store is equal to store and this still won't work just quite yet oh whoops it looks like let's see oh we put an equal sign here by accident and you'll still see that this won't quite work because we have to pass in some sort of reducer into this create store function so what we're going to do is we're going to create our first reducer and that is essentially going to be a duck so what we can do is let's create a duck for our counter and we are going to go into the ducks folder and we're going to create a counter.js in here now the first thing we're going to do is we're going to create our initial state now our initial state if you remember our diagram over here is essentially going to be what gets stored in our state but what we want the initial values of that to be now we have a very single sync a simple counter app and in that counter app all we really want to store that we want all the other components to access from our redux store is the count itself so we're going to go ahead and say const initial state we're going to make it a map and we're going to say count is just equal to 0. now we're going to create the actions now the two actions we want is pretty much increment state and decrement state because those are the only two things those are the only two things that we're going to be doing with our account so when you create an action there are two things that you do the first thing is you create the action name and the way you do that is you create a variable and you make it equal to the string so i'm going to create increment in all caps is the usual um is the usual uh um sorry standard that you want to use for a redox name and the string that it's going to be tied to is going to be um you could for example just name it increment and the reason you make this a variable is because you're going to be using this below in a function and you want to make sure there's a lot of times where it can get tricky you have a lot of different actions and you don't want the names to sort of get confused and you're going to be using this string increment a lot so to prevent you from you know making a spelling error when you're using that increment string anywhere else you'd store it as a variable and you just call that variable so the next part of making an action is we are just going to make the function for it and the function for it is just going to be equal to something simple uh like this it's going to be a function that returns a map and in redux all your functions um all your actions will be functions that return maps and the type is going to be what the action is and don't worry if you don't get it just quite yet you'll see how it all comes together in the end and for that type we're going to use that increment variable that we set up over here now the final thing we're going to do is we're actually going to implement the reducer itself the thing that will actually um go ahead and increment this variable so what we're going to do and we're going to export the default export default this function and this function is uh what we're going to be using in our configure store we're going to be passing in a couple variables here and this is just going to be an unnamed function so state is going to be equal to initial state this is just saying that listen we're going to be passing a state variable and if that state barrel is undefined aka the application hasn't been started before we're going to make it equal to whatever the initial state is and then we're going to be taking in our action and we're going to go ahead and make that a function and then inside of here we're going to have our switch and this switch is essentially what is going to control what happens based on which action gets called it will it will be um oops action dot type so this switch statement is just like an if statement based on what type the action is so whether it's an increment or a decrement it will do something different so before we go ahead and fill this action in let's go ahead and make an action for our decrement so we're going to do the same thing we're going to call this decrement and we're going to make this string equal to decrement and then we're going to create a function it's going to be the same as increment but we're going to call it decrement and we're going to pass in the type as decrement as well so now in this switch statement we're going to have two cases one is if we have the increment action and then we can go ahead and you know choose what to do in here let's just return undefined for now oops let's go ahead and return undefined for now and number two is what is going to happen in our decrement and let's also just return undefined now in here is where you are going to actually do your returning for the state so in your return if we have an increment action what do we want to do well we want to increment this count by one that's what incrementing is so what we are going to return is we are going to return a state where everything in the state is the same other than our count and our new count is going to be equal to whatever the state.count was plus one the reason we do it like this is because in regular applications you might have a lot more variables in your state let's say i have like count let's say i have like i don't know like name you know and let's say we have like you know id and that id is initialized zero or whatever if we are doing an increment action all we care about is incrementing the count when we return something here it will completely overwrite the state with whatever you put in here so if i were to just put in a map with if i were to just put in a map with count well that would make it so the new state would just be count is equal to whatever the count would be which is why we have to go ahead and we have to spread all the variables from the state that we are getting passed in and then after that we add our new count so when it returns this the new state will be equal to everything that's already inside of the state as well as our count that is being overwritten now um you can pause the video and try to think of what the decrement's going to look like i'll give you a second to do that but essentially the decrement is going to look the exact same except instead of state dot count minus one all right plus one is going to be state.count minus one and let's get rid of this old return function so now our reducer is set up and all we have to do in this configure store is we are going to go ahead and we're going to import our reducer that we just made so we're going to import and we're going to call this for example counter reducer i like to call uh this reducer name by whatever we like gave it in our ducks so this duck is called counter and then append reducer to it and we're going to import it from that folder duck slash counter and then we are going to go ahead and we are going to say const reducer is going to be equal to combined reducers and what this is going to do the reason we do combine reducers is because we might have more than one reducer so we have you know a reducer a duck for our counter and we would store things like the count state variable in there and we might have actions like increment and decrement in there but what happens if my application is no longer just a counter maybe a counter is a small part of that application and another part of that application is storing a user and inside of that user they will have an id and stuff like that well we don't want to store everything inside of one dock one reducer because by the time you know we have an actual application we're going to have a ton of different state variables a ton of different actions and if you store everything inside of one duck it's going to get way too crowded there's going to be way too many actions way too many um state variables and way too many reducer switch cases that you're going to have to do and eventually your file gets up to like 500 lines type of thing so when you want to create a new you know reducer for something different like let's say for example our application handled users we would create a new reducer for that and that reducer would hold you know the state variables of the user like the user id the user name blah blah blah now the reason we use this combined reducers is because if we have multiple reducers we would list all of the reducers inside of here so fortunately for us we only have one reducer so we're going to call it counter and we're just going to link to our defaulted export over here just like this now at our create store we can go ahead and we can pass in our reducer bam and now passing in this reducer let's go ahead and refresh this it looks like we broke something with code sandbox uh counter is return undefined for initialization um oh i think we might have to give it a um let's see so let's debug a little and see what we went wrong with so reducer equals counter is a function that returns a map and that has counter reducer in here that we are importing that all looks good reducer counter returned undefined during the initialization oh right we need to have a sorry about that we need to have a default um we need to have a default case for our switch statement so see here um right now it's going to return undefined because when it first gets run it's returning none of these cases are hitting we're not dispatching an increment or a decrement call we have to have a default in our switch case and that default is just going to return the state and right remember state is being initialized to initial state we go ahead and remove all this stuff initial state when we first run it and there we go so nothing is going to look different functionally but behind the scenes we've actually done a lot we have set up this entire redux store in redux structure and now we can go ahead and start using it so let's have some fun and start using this thing so the first thing i'm going to do is over here inside of this counter component i'm going to get rid of the state variable count and set count i'm going to go ahead and get rid of all of this and now we're going to get a bunch of errors because number one count is undefined and number two even if it was defined these buttons are not calling anything so we're going to do two things number one is we're going to get the count variable from our redux store and number two we're going to get our counter to dispatch an action that will increment and decrement the count it's going to dispatch the action that we set up over here so over here we're going to go ahead and the first thing we're going to do is in order to read a variable from our redux store we have to use a hook called use selector and if i were to type in use selector here you will see that it automatically imports it from react redux and essentially what we're going to do is we're just going to say const count it's going to be equal to use selector and in this hook it pretty much has an automatic parameter that it passes in called state and you are going to just find the variable you want as following you go to state and then at the first thing you want to destruct it from state is not destructure but get out of state is the reducer that the variable you want is inside of now if you remember from consig configure store we only have a single reducer setup and that is the counter reducer but we can go so we'll go ahead and get the counter reducer and then out of that reducer we want just the variable from that reducer that we want um let's go to the counter duck and we can see here that the variable we want is just called count bam just like this and then i'll go ahead and save and let's go ahead and refresh this oops and you will see here the count is equal to zero and obviously the buttons don't work yet because we haven't hooked up our increment and decrement function but if i were to come and i were to set this initial state to let's say have the count be five you'll see if i refresh it bam the count gets changed to five this counter is now reading the count from our redux store now let's go ahead let's make the count back to zero again and let's go ahead and let's um add an increment function in here so in this increment function all we want to do is we want to dispatch an increment action because when we dispatch an increment function it will asynchronously dispatch it our redux provider that's running in the background will pick up the action and do whatever the reducer says to do with it and in this case the reducer says we should keep everything in the state the same other than the count and the count will be uh the count plus one so let's go ahead and do that to do that we have to use another hook called use dispatch and by the way we're using all these hooks to get react redux to work with us but before the era of hooks back in the days where you just had class components the setup for this was so much harder you had to do so many different things just to get redux working and it was so much more complex so we really are living in sort of a golden age of react and redux using functional components and things like hooks i can't even tell you if you really want to know i have a couple of old videos that i've done on setting up um redox with react you can go over there and see what a nightmare it used to be but man it is so much nicer now and um we're living the good life um so what we're gonna do is we're gonna say const dispatch is going to be equal to and we're going to use this use dispatch hook um that comes from react redux and we're just going to initialize our dispatch function and this dispatch function will allow us to call any functions that our redux store our our duck has so i can't just call this increment function regularly because it would just be calling the function if i wrap it around in dispatch what that does is it tells the redo the redux listener in the background hey i want to dispatch an action of this type please do whatever it entails and in this case it entails incrementing so let's go ahead and um uh uh um yeah so we've got we've gone ahead and we've created our dispatch function now in increment all we're gonna do is we're gonna dispatch and then i'm gonna go ahead and what was the name of our um function here increment um increment okay so it's a bit weird um so because this function in this component is also called increment so i'm going to rename this like do increment or handle increment that's i think a bit more standard and then this one will be handle decrement let's go ahead and replace that for the buttons okay and now we're going to dispatch increment and that increment we're going to import it from our duck and inside of our uh decrement we're going to go ahead and dispatch decrement decrement bam we're going to automatically import that from our duck as well all right let's see if that works no so it doesn't work um actually supposed to be playing objects use custom middleware for async options okay so let's go ahead and look at what we did wrong oh right we have to actually call the function in here so we have to pass in the um we have to actually call the function not just pass in a reference to the function so let's go ahead and save that and hopefully if you get that error you now know how to solve it um if i click increment bam there we go now it is completely incrementing and getting the thing um all in our redux store so let's go ahead and do what our initial goal was which was to store the count inside of our or to display the account from inside of our app component so we can go ahead and delete the count from here we can uh cut so um this code that actually gets the count from here we can go ahead and cut this we can go ahead and move that and then we're going to come back and over here an app we're going to do the same thing that we did over here on counter to get this variable now this is where things come easy because now i want to use that count variable inside of this component and it becomes super easy i just go ahead and um go ahead and declare it and i'll have to import the use selector same way and now all of a sudden i can go ahead pass and count into this and bam now i'm incrementing the count from one component and it is showing up in the other component and this is so convenient it is awesome i love redux for this reason now i promised at the beginning of this video that i was going to show you a more complex um example of this and i'm still going to do that um if you just wanted to see how to set up redux and everything and use this code as an example you can pretty much stop here but i'm going to show you a bit more complex and then in the next videos i'm going to get even more complex adding more things like more reducers and making a more complex application with this but what if i wanted a count and i wanted that count this is going gonna be uh pretty weird but like let's say i wanted um each count to have a vote um and uh each count would represent let's say a different person and i wanted this to display the total count and i wanted to keep the local like vote count for each person over here so what i'm going to do is number one um let's go ahead and uh what i can do here is encounter let's say in props i also passed in a person's name so let's say cons like name equals props and then over here i'm just going to display you know like in paragraphs tags like their name um okay um or let's make it like an h2 okay and over here when i call the counter i'm going to say something like name equals anthony anthony sistely that's my name uh all right oh whoops what am i doing you gotta pass that in as uh a string okay cool so we can see here anthony and let's say i wanted another count for let's say like uh bob smith and then like stephanie like fool or something so you can see here i have a bunch of different counters and let's go ahead and refresh this the count is zero when i increment the count for anthony the count over here increases and when i increment it for bob it also increases so our redux store is sort of acting like a total count and i can even change this let's change this to total count and now i want to show i also want to have maybe a local count in here so i want to see how many vote or total let's call this total votes and then um i know like i'm changing the variable name up but that's just for the sake of the example i can go ahead and i can create a um in our counter let's go ahead and create a state variable so con cons like you know votes set votes is going to be equal to react.ustate and we're going to set their votes initially to zero and when we increment not only are we gonna you know increment the count that sorry about that we have in our actual redux store but we're also going to increment their votes so we're going to set votes just to be votes plus one the same way that we had it before let's go ahead and do that and then over here we're going to do votes minus one and now let's just go ahead and display the votes so like in h6 we're gonna say like uh you know um votes and then we're going to display their votes oops bam okay h is a bit small so let's make it an h3 make it a bit bigger here we go so now i can go ahead and increment anthony cestilli's votes but when i increment bob smith's votes you'll see anthony's distillery votes are still three but the total votes so if i if bob smith has 10 votes and anthony silly have uh three votes you can see the total votes is now 13. and if i decrement it it'll work the same and if i give stephanie a bunch of votes you'll see it increments it so this is a cool little example if you want we can even um go ahead and um you'll clean this up a bit and um if you want this is a cool little react exercise um if you can think of a way to clean up instead of having to call this counter component over and over again um i'll give you a second to think about it but one way we can clean it up is just say like we can make a array called like voters and you know we can have just their names like anthony silly and this is now nothing to do with redux but um just a little cool react exercise stephanie fu and i can even add like you know like kevin ma and then instead of like you know having a different counter component for every single one of these four people what i'm gonna do is i'm just going to go through our oops and let's name that lowercase i'm just going to go through my voters.map voter and i'm just going to return counter where the name is just going to be equal to voter ban just like that so that way we don't have to call the com the counter component a million times like if we had like 30 different voters i wouldn't want to copy and paste counter counter counter counter counter in the jsx um i can just do it like this and we've gone over mapping before but yeah that is pretty much it and i'll go ahead and refresh this sometimes on code sandbox the redux store gets a bit finicky if i were to like you know give it a bunch of votes and then change something um just like that and save it you'll see that the react let's go ahead and like um let's add like uh paul or something um you'll you'll see that like sometimes the react store gets a bit finicky with code silence but anyways that is it um if you enjoyed this video please consider liking subscribing leaving a comment if you found value it helps the youtube algorithm so much i can't even tell you guys how much it helps um and yeah code sandbox link feel free to play around with this feel free to use this as like sort of your go-to way of how to set up a redox project um i always always uh go back to one of my projects as a reference on how to set up a redux store whenever i start a new project and it's just really useful so i hope you're all staying safe and i'll see you guys in the next video

Channel: Anthony Sistilli

Views: 21,927

Keywords: react tutorial, react js, learn react, react crash course, reactjs tutorial, web development, redux tutorial, react redux, react hooks, react tutorial for beginners, redux crash course, react redux crash course, react redux tutorial for beginners, reactjs course, react tutorial for beginners 2020, redux tutorial 2021, introduction to redux, redux intro, redux hooks, useSelector redux, useDispatch redux, redux react tutorial, redux react hooks, redux react app

Id: wcXTCG8zMhY

Length: 41min 9sec (2469 seconds)

Published: Sun Nov 15 2020