🔴 Its time to master REDUX! (Live PWJ coaching call)

uh like timeout people that's there yeah yeah i'm going there i'm gonna do it i'm gonna go there give me one second guys give me one second yo what is going on guys welcome to a another video today we're gonna be actually hosting our live call from profit with javascript inside of youtube so you guys can go ahead and get a sneak peek as to what we teach inside the course but without further ado i'm going to pretty much drop all the value for our students inside today's lesson so let's go ahead and meet today's students let me go ahead and how do i actually unmute everyone in one go uh or allow participants to um boom and then everyone if you want to there we go go ahead and unmute yourself guys and say what's up guys [Laughter] we have literally 184 people in this zoom core right now which is insane okay now um i see some messages from atul saying dear sonny it's my first time i'd like to know it's wednesday so the agenda for today guys is i'm going to go ahead and mute everyone and you can unmute yourselves if needed but what i'm going to do now guys is pretty much go through today's agenda so that way we get a rough idea about what we're going to be covering in today's course okay so first thing that we're going to firstly i want to say also oh yeah so so people are saying my voice is resonating it's because i'm in a different room now so i'm going to fix that soon but it's because right now there's a bit of echo in this room so i apologize for that but thank you so much everyone for the kind birthday messages i saw so many of them on on instagram it's insane i saw so many dms really really appreciate and love every single one of you so thank you before we start to every single one of you uh for that um and yeah so today we're going to be talking about some high level stuff so we're going to be pretty much covering loads of high level content so pretty much always react i guess and kind of go into at that depth and that detail answering some of your questions um any sort of questions that students have we're going to go ahead and cover that and then like like the title says we're going to be covering the uh redux today so i want to do a deep dive on redux because redux is something that in in a production environment redux is going to be super valuable okay so it's going to be a skill that you guys are going to be able to if you if you know redux it's going to be something which is going to boost your your worth to accompany a huge huge amount okay now with that said redux is kind of complicated so i haven't actually used redux in quite a while and now what i'm going to be doing is actually going ahead and show you so i'm going to be using the react context api first to go ahead and show you guys how the react uh this sort of redux pattern works and then i'm going to take it a level up and i'm pretty much going to show you how to implement redux now the interesting part about today's call is going to be that because i haven't used redux in a long time it's going to be an experience where i will show you because i've actually forgotten how to implement redux which is awesome for you guys because i've used it a ton in the past but i've forgotten how to implement it right so i'm going to show you for exactly how i go about if i forget something if i haven't worked on something in a while my exact sort of mind and workflow and how i'm going to do it and then hopefully that'll give you guys confidence boost and sort of like that realistic sort of understanding as to how you're going to be doing it when it comes to that practical use case okay so let's go ahead and jump in firstly let's go ahead and ask does anyone have any questions because i'm going to take two questions before we get started okay so i have i have one sony go for it joe so when you when you say redux are we talking postgres sql or are we talking mysql sql server so when we're talking about redux uh no redux is actually purely a reacting so you know how we have the react context api which so basically inside of a react app we're gonna have to manage our data somehow throughout the app right redux is basically think of it as the commercial level solution to handling data flow within an application right okay so without it i'll explain it and we'll get a very visual breakdown of how we sort of do this stuff but um yeah it's going to be sort of the professional stuff so today is actually going to be really important for a lot of you guys because it's going to help you guys go ahead and sort of level up your understanding from react context api to redux and as far as i'm aware i think this is the first redux call or like stream on the channel right so this is awesome and even for the live course yeah so um awesome yes sunny i have a question shoot dude go for it yeah like we did the amazon clone and now we are we have started already with the react.js so i was reading about the react.js and there was a part which uh i read about jsx okay so we i did not notice anywhere like we have used it like any syntax or something so yeah yeah i wanted to know about that okay so you're wondering what jsx is right right yeah so jsx is essentially whenever we call them react right notice how it reacts so i'm going to go ahead and actually show you an example so it's a lot easier for you guys to see i'm going to share my screen as well so i don't know if you let me know if you guys can see this all you need to do guys if you can see this just please go ahead and wave your hand yeah i can see that yeah okay awesome um let me go ahead and actually share my um give me one sec guys zoom why do they do this all right zoom upgraded everything and i can't find anything sorry guys here one sec yeah and also a question in the meantime sony isn't redux like uh made from a different company like it's not inside react like react context api is yeah so good good point actually so redux is sort of think of it as like a community built a solution right so it was built by the community um oh god sake okay yeah it was built by the community um and it's i'm not sure who built redux but to answer your question the react context api was built by the guys over at facebook and that's uh that's why it's pretty much heavily used now it's kind of getting more and more heavily used um but there is something else uh it's not called relay i think is it called a relay or um recoil i think it's called uh so if we type in react recoil i think is it recoil or relay one of them yeah recoil recoil is another state management library that has come into play so i'm gonna check out this stuff but uh right now the one that's mostly used is um is um is the uh react uh readout sorry yeah so redox okay so with that said let's go yeah redux is basically a framework yeah react is a library this is a difference no no so redux is a module that you just pull into react which reacts as a library and redux is just like an npm module that you just pull in you'll pretty much go ahead and install redux into your uh into your react project and then you can use it um okay so now jsx to answer your question earlier i can't remember who asked the question but um uh to answer your question yeah awesome so to answer your question you know in react we have this return block okay we have this nice little return block here now notice how it returns um let's just go to maybe here for example okay so this is basically what gets returned now inside of um inside of this return block you can actually go ahead and have so let's go ahead and do like here for example ignore the if statements and things like that but here for example if we have a return block david please man the chat um and admit everyone in the waiting room yep so here if we have a return block you see these curly brackets yeah so these curly brackets are pretty much going to allow you to have javascript code inside of this html return okay so basically think of jsx as like a way of merging html and javascript together and that's what we use that's why you don't have a html file and the javascript file in react you just use a jsx file because it allows you to do both okay and then you basically return um you basically go ahead and return um this the sort of the output that you want okay so with that said and to be honest this will make a lot of sense when we actually jump into the code so with that said what we're going to do now is i'm going to go ahead and just break down some some concepts for you guys so just let me know if you guys can see this excuse me sonny yep i have a question on the jsx okay like uh in in past we have created like uh javascript components within the html and we we mentioned the file extension as js yep instead of jsx okay uh it still worked right like uh yeah so the reason why it works is javascript out of the box is because when you could use create react app what it's actually doing is you're actually going it kind of has like when you use create reactive it has like a special clever compiler underneath which changes javascript files to jsx okay so so you know some extensions on some tutorials are jsx um it doesn't matter because honestly you when you're using it will be it will be you don't need to write jsx just think of it when you use create react app you can just use dot js and it works oh okay so i know it can get a bit confusing when it kind of overlaps like that but to answer your question they're not sure that's how you do it um okay also if i'm sorry if i didn't admit anyone who just jumped in um okay so now what we're gonna do is let's go ahead and just dive into some of this so right now so imagine you have react right so i'm going to go ahead and freeze it so imagine you've got react yeah and now for many of you that don't understand what react is it's a library so if you're new to profit with javascript then react is the library that basically supercharges your apps okay so this allows you to build apps like netflix tinder uber like as and you can pretty much build like any kind of app with react right so frankly i did a massive contract with sonos sonos building like a new like sort of radio app and pretty much using react for that now you can do loads of things with react and it's very very powerful and it allows you to build something called a progressive web app okay so a progressive web app stands basically think of a progressive web app as something which is which is basically has the power of a native app okay so it has the power of a native app so there's a power of a native app but it runs on the browsers okay so it just runs in a browser which means if it's running on a browser it means it doesn't matter if it's on ios android iphone tablet desktop wherever it is it's going to be working okay so at that point it really doesn't matter where you're sort of running it but that's why it's beneficial to use something like react now before you can jump into react i would recommend you do go ahead and learn the fundamentals so the fundamentals are essentially just going to be html so html javascript oops oh no okay javascript um i don't know why that's there but you know anyway here's your javascript and css ignore that little bracket i can't can't seem to get rid of it um but yeah so that's pretty much what you need to go ahead and learn just roughly okay so just if you can get a little project working with these three things right and you can pretty much get it working to a very minimal scale so imagine you have a web page with a button click and things like that at that point i would say honestly just just shoot your luck just go ahead and try and give react a try okay and now remember like there's no condition of or at which point do i make the jump or like am i ready for it like don't worry about it just literally the more if you code in if you start using the react library um it's very very lightweight which means you only need to use what you need to basically go ahead and you only use what you need and it will allow you to sort of it will build your understanding of this as you're using react okay so i just want to get rid of something i've got some some annoying screen i use flux to protect sort of my eyes as it gets later but i'm going to go ahead and quit because my screen looks all brown and it's kind of messing me up um okay there we go so now with that said we have react okay now react is something so it has i'm going to draw a line here so let's go ahead and join so that's basically our intro now react it uses something called component based design okay now component based design is something that you have to become familiar with why is it important because it allows you to basically go ahead and write a piece of code once and reuse it many times okay so what do i mean by this so imagine i've got a web page so here's my web page uh let's make it very big right so this is my web page now on this web page okay imagine it has like um a header okay so it has a header at the top and this is where you have like the nav bar and all that sort of stuff imagine it has a footer at the bottom okay and then imagine you have like a bunch of products so imagine this is like amazon or ebay or something okay so this is a product uh this is a product and then you've got another product here okay now on a typical website what we tend to do is we'll code up the the we'll sort of add some code for this bit we'll then add up the same code for this bit and then we'll sort of copy and paste it and add up for this bit and we'll just change this sort of into it like details inside now why is that a bad idea because let's say i want let's say like a designer comes in and says hey guys we're going to change all of the design so all of these product tiles are going to look different okay now i need to go here here and here and change everything which means i don't i don't have to just change one piece of like of code i have to change this one i then have to go ahead and change this one i have to go ahead and change this one and if i forget or say if i change one thing in this one so i managed to make it a little bit different now my code doesn't look the same so the middle one's gonna be different when it shouldn't be like that everything should be uniform okay so let's imagine this is called the product component so imagine this is just called the um make it smaller imagine this is called the product dot js component okay so this is like a product component dot js oh god who's that um let me let me go ahead good everybody mute everybody let me mute the chat um i'm going to go ahead and uh let me go ahead okay you all there we go all right now here we go imagine we got another one which is product.js okay so we have three products now why is this so powerful because we literally code the product once right and then we pretty much reuse this thing so i can code it once i have this one file product.js then how do i reuse it we use something called props okay oops um oh wow why does that change why is today all of a sudden all my stuff has changed okay but we use this props okay now props is something like imagine you have you pass in props so you can pass in something like the title the price the picture right so these are just props now what does prop stands for it stands for properties these are just different properties and you can pass it into a product and then it renders out the final product this is awesome right this allows us to pretty much re code up our product.js once and then based on the props that we pass in we render out the final product which means that every single time each one comes out looking the exact same right except with different details so that means that we if if a designer comes along and says hey we need to update all the products it's so easy to go ahead and do that because all we have to do is go ahead and change one of the what we have to do is change this one file and then everything gets updated accordingly so that's something to bear in mind now this is the first principle okay so we have props so number one is props and then basically here i'm just going to write the two principles you must understand in react okay so one one is props and now number two is going to be state now state is something imagine it's just like a short term memory okay so state i refer to as short-term memory so that's what i like to kind of refer to as i just call this the short-term memory of a component now why do i call it short-term because if you are to basically go ahead and get rid of the if you're going to go ahead and refresh the page the state will always return to its original value which means that say for example i have a a counter button okay so let's say i had a component here and let's say this count this this was like a let's imagine we've got like uh at the bottom of a product right so imagine at the bottom of a product i've got like a counter and inside of this counter it pretty much says like it says zero or and then it has a a plus and a minus okay so it has a zero and then it has a plus and then here it has a minus okay so imagine like i had this sort of ticker thing right so basically if i go ahead and i'm like clicking on this one so imagine i'm like clicking so i go ahead and click plus a few times this will change to like one two three four five so the end afterwards this would go ahead and be like four for example now when i refresh the page this will go back to zero because memory state is short term which means it doesn't persist which means when we refresh it goes back to zero now obviously we want to keep track of this state but why do we need state it allows us to do things like this where basically if i go ahead and click like plus plus plus it will allow us to go ahead and have that functionality whereas if i didn't and also state is isolated so if i had this in this component then inside of this component for example here oops so for example in here we would have the same thing and this one could be a completely different value so this one could even have like something like 20 in right so each each component has its own state so these two things are crucial for our understanding of react so props and state okay now we need to know this um and we need to sort of like understand props and state very well because it's going to be crucial in building out an application so with that said do we have any questions on this at this point so either about props or state so feel free to unmute yourself and we can pretty much answer any questions anyone has at this point yes funny yeah just one simple question uh so uh so actually the props is um almost relates to the object-oriented concept right so in javascript or in any other different uh programming language we have classes right so uh it's almost made it is made the same way right yeah so think of it like this way so think of it like um oh sorry by the way i saw that some people say can i move the camera but uh it's fine so think of it this way so yes so firstly okay the reason why i'm hesitant to say yes is because we're trying to move away from class-based components right we're trying to move away from class-based components to functional components because functional commerce a lot easier to sort of read and understand now your understanding of it is correct so uh the reason why it's correct is because class-based components yes are they have their own kind of memory so they kind of have this dot so you have like an instance some objects imagine you had like the product object project a product class then you would say like new product and you'd pass in some values and then you'd have that product right now the values inside that product will belong to that object right so yes in in that in that way of thinking about it does it does make sense um the reason why this is kind of a whole other sort of discussion and it comes around class-based versus um functional okay so like but the main thing is the main thing that we need to understand is that every component just has their own state okay so every component has their own state now i see some people saying did you erase everything on the whiteboard nope so if you want to go ahead and just you can take a screenshot of this now um remember that the entire session is going to be recorded so it will be uploaded afterwards but uh feel free to take a screenshot now yeah when we talk about state right we make it's kind of a short-term memory so is there any kind of a standard practice how much amount of data you should keep that's if you're getting some amount of data from api or something um so to answer your question you're saying is there a kind of um a kind of limit to the amount of size limit or something like this much amount of data no no no so so state just think of it as just think of state as variables inside of an object so it really at this point it could be huge right like you could literally pull an entire database into a variable if you want in i'm not saying it's good practice but you could go ahead and do that right you can definitely go ahead and do that um but what i would go ahead and say is um thank you so much frank for dropping a donation on youtube hey um yeah so what i would say is pretty much yeah it doesn't there is no spacing limit you can pull in and you could literally but what i would say is what if you're considering pulling in an entire database into a component then you might be wanting to put it not into the component but into something like react context api or redux so that way you can pretty much go ahead and save it to like a global state or global store or global value and then any component can go ahead and access it but we'll get into that in just a sec but um but if that will happen then uh it will make our app more heavier right and it is not good yeah so so there's a lot of considerations around like do you want to have your app um you know like do you want to have your components heavy pulling things in do every time something changes should it refetch all the data again you have to kind of think about all of these things when you're building an app but try and keep it simple for now guys and only that what my advice to you would be keep it simple because it will get to a point where you will have so much um like you you'll you'll get so many natural questions that will just come up right and what i would say is make sure like just just build things as you need it because you're always going to have a curious question you're always going to have some kind of question as to like should i do this or should i not do this or should i do that or should i do this it kind of becomes a bit kind of like yo you're going to forever be asking questions as opposed to actually going ahead and coding i would say just go ahead and code go ahead and build things as you need it and then you'll run into those questions as answers naturally right otherwise even if i told you an answer right now you'll you'll forget it by the time it comes to actually implementing it right all right so that yeah one last question i have yeah okay so i wanted to ask like how do you exactly pass props how do you pass props uh i will i will be showing you uh i'll show you a light demo before very soon as to how we set up props and things like that um because we're gonna need to know how to do it but basically it's like uh when you render out a a um let me go ahead and share the screen so imagine you like when you when you render out a component you pretty much render it out like this it'll be product like this okay now if you want to pass in the title it'll be something like this let's just call it amazon echo or something oh god damn it why does it always do that amazon echo right so you see what i just did there right so and one more thing yep uh so so you see you pass in as an attribute yeah yeah yeah so i was watching this david video uh the other day about straightening props and he said something about crops that you can't pass them like from top to bottom or something i didn't understand that right oh isn't you you can't pass them yeah so that's what we're going to come to now right so uh i'll explain that in a sec but yeah you can you can pass okay props down but you can't pass props up and that i will explain exactly what we did i had no idea about that so i got confused with that no worries i'll explain yeah i just have a great question um who's who said it first because one question and then we're moving on i did i i started at the before pre on shoe okay so is it is that shrika or srika oh it's okay yeah shrieker okay srika go for it yeah thanks uh so have you ever coded in python before because i was just trying to make um a connection to um to react so like whenever you import things is it kind of like how it is in python like you import different modules in order for or like libraries in order for it to work yes so it's exactly the same you pretty much install something so in python you install with pip uh in in javascript using npm or yarn so it's pretty much the same thing you install a module and you go ahead and use the module so the same thing yeah so that might that might actually have helped a lot of people out so that's a good question yeah um okay so now guys i'm gonna go ahead and do the same thing so i'm gonna mute allow you to unmute yourselves if you need it uh and then pretty much we can go ahead and jump into the next so we talked about state and props okay so we had we have our understanding of why this is important why this is important now let's go ahead and carry on with that so okay so imagine we've got an app okay so this is like let's just call it the the next facebook app right and it's built with react okay and this is our case study so this is the one that we're going to be building okay now when you use create react app what it does is it it builds out you can see your [Music] there we go thank you guys so you can see it now right yeah yep so so imagine we have the next facebook app right so it's going to be a massive million dollar app and we're building with the react okay when we use create react app what we will see is that we actually go ahead and it will build something called app.js now app.js is simply just like a it's a component right so it says you you get app.js whenever you use it now app.js all it does is it will give you a little spinny sort of react icon okay so to show you guys what i mean by this i'm going to literally put into practice so i'm going to open up a terminal i'm going to go full screen on this i'm going to make this huge so you guys can see it and then what i'm going to do is i'm going to go into my desktop so i'm going to desktop and then i'm going to do mpx so i'm going to mpx create react app and let me go ahead and do so here i'm going to say um coach let's just call it why does it keep changing taking my focus let's go ahead and do like um demo redux app okay so basically i'll explain what this is so mpx is basically a node package i i can i think of it as node package executor right and what it does it goes to the node like registry on the internet and it will basically go ahead and get the latest create reactor which is something which with the guys over at facebook created to allow us to you we can use this and it will go ahead and build the um like a template starting react app for us right and then here we put the name of the app in so we're going to do demo relax up so if i hit enter uh what it should do is it starts to create the react app okay so we can pretty much leave that running and once this goes ahead and um starts once this goes and starts we'll come back to it so while this is running this will create something called app.js so this was like one component and then what we can do is imagine on facebook you have loads of things on facebook right you have like a feed so there's some you have a header you have a feed so let's go ahead and build some components so here imagine we've got like a header component so imagine we build a header component so here we're just going to say header dot js and um i'll make this a rainbow again i like it when it does the it changes the color itself a little circle yeah that's it i found it yeah there we go thank you okay it's just more colorful for you guys to see then imagine you've got header.js and then imagine we create a feed so like here we've got a feed so this would be like feed dot js and then imagine we had another one so and this could be like um let's just say okay and then imagine we have a bunch of posts right so post like imagine you've got a post suggest because like on facebook you've got a feed and then you've got a bunch of posts okay so why is it like a tree because on in app.js we'll render the feed and we'll render the header and that'll create a page so you have a header at the top of the page so you'd have a header on top of the page and then you have your feed and then inside your feed you might have a post right so you might have like a post you might as might not be able to see that very clearly so i use this one you have a post now you might not just have one post you have several posts okay so you're going to have like a few different posts um so we pretty much can reuse the same component so post dot js okay now so this will render out several posts now what happens is so this is actually goes to pre-entry's question so app.js imagine we had i said think of it this way so imagine we had another component called login right so i'm going to go ahead and create a component over here this one's called the login.js component and the purpose of this one is to basically the only purpose of this is going to be a login screen okay so just think of this as like levels just just to make it very simple for now think of this as level zero level one and level two okay now at level zero we have the app level one we start rendering the page so you can pretty much put things like the header the feed login and imagine the user goes to login and then once you've logged in i get the user object at this point so now i have the user the object right so imagine like i log in and i've successfully got the user's object okay that's cool but i need the user object when i'm at post when i'm over here so i kind of need the user over here but i get the user object over here so how the hell do i get my user over here right so what we could do is we could have a piece of state here called user and basically in react you can you can pass your you so this by default would be no you can pass the user and the sort of there's something called a set user right so in inside of react you'll have something like this where you've got a hook and then it'll say use state right and then by default you could have no as the value so this means inside of react you have a user where the default value is no okay and what you can do is you can actually pass set user down to login.js and what this does is you can pass that down as a prop so you can pass uh like props down so if i need the user down here i can pass it through here and then from feed to post i can pass it through here and then this is how the user will get here right now i can also so preemptively you asked about it's one direction right it's it's only one direction you can go now that's because imagine we have the user up here right i can pass set user down here and then basically when they log in i can say set the user to this which means that this user gets updated okay so i can do that so which means in some sense i can kind of go back up the tree but it's not a good practice to do it like that right which means that the user gets this one more or one question while you're doing asking or telling what is yeah so how do i exactly know which is the top most component and which is the most component um i'll show you in just a sec once uh our thing once the app gets running yeah but so so think of it this is app.js is going to be your top most component in the start we have the login.js and then basically the user is here right now what we need to do is we kind of need to set the user so we kind of then at this point this gets populated and then we need to if i need the user over here i need to pass it over here and i need to pass it down here and i need to also pass it over this one and imagine if i had another component over here for example let's say we had a component called um let's just call it a video post right so imagine we've got like a video post component so this one what i'm gonna then need to do is pass it over here because i need the user so i need to go ahead and pass it over here now you can already see there's so much passing around right there's this there's just endless arrows okay and and this is what we call this a problem right as soon as you see this i kind of it screams something called prop drilling oops something i want to say something yeah go for it you know like the amazing part of it is last night i just finished developing facebook clone with you you know following your youtube was the name you know the youtube video you made yep and i understood nothing about this uh you know reducer and who all that i just copied the code and it worked right and now i'm getting there i understand it thank you very much awesome man that's i love that dude thank you so much i can't see anyone right now but what was your name who was that they said that i'm here man yeah awesome abdul that's amazing man oh that's awesome to hear that dude uh and i'm really really glad that i hoped you understand so um because yeah like you see we have this kind of tree and we call this property because you're like oh i kind of need to pass the user down and down here and then down it and basically this leads to code which is coupled right now what does coupled mean it means that like if i change something over here i should be confident that i don't break something over here but in this case with all these like connected arrows yes the app might work but it might break if i change something over here if i change feed.js so that it no longer passes the user in so imagine if i it no longer does this it no longer does this then i'm kind of i'm kind of screwed because i'm like oh god the user just broke which means that this component doesn't render the user anymore right so how do we get past all of this headache okay so before first before we kind of solve this i'm going to show you guys the actual app itself so let's go ahead and do cd demo redux app so now i'm inside of the component and then here i'm going to go ahead and do code so it's a little neat trick so you can say code inside for you guys it'll be code dot dot but mine's going to be coding it keeps taking the focus away from my my mouse it's really annoying um okay and this opens up vs code now what i'm going to do is also if you're in the waiting room sorry guys um i'm going to actually give joe do you mind being do you want to be a co-host yep awesome i'm going to make you a co-host nice nice okay so now sonia just have a question cover what's this chord dot for right so i'll show you first how to install it and then i'll explain it so here you want to do command shift p and you see if you type in shell command it will say i'm using the beta version of vs code so i get like the additional features and stuff but in your one it will say install code command in path right so to to you want to do command shift p to get that up so quantity of p shell and then you should see install pokemon now the reason why this is really useful is because remember when i went back here to this bit right for you guys all you're going to have to do is so imagine like i'm inside of the right directory if i just do code dot right what it will do is it opens up so imagine i'm gonna show you guys against the code insiders dot but for you lot it will be code dot and then what that did is it opened up vs code with the with the files and everything on my left you see that sounds good all right so it's a very quick start to go ahead and open up vs code right perfect um also we crazy enough have half a thousand people watching on youtube right now and facebook so guys smash the thumbs up if you're enjoying that that's that's dope um that means there's 700 people yeah there's like 700 people watching this right now that's awesome um okay so um right now what we're gonna do is we've got source so here so this is the app that you're gonna get so if you hit command j pull it up like this then you should get the little terminal pop up here and i'm going to go ahead and move myself you guys so we've got to come on j and then what you're going to do is you're going to have i'm going to make this super big for you guys can you you guys can still see my screen right yep yeah okay so npm stop npm start and then it will go ahead and spin up the app so give this a second also while this is doing this you see it will pop up the localhost 3000 um give this just a sec and then let me go ahead and check the our chat to see if there's any chat come through so we see props okay awesome right now you get this spinning thing so if you get this like awesome job right you already made some progress and you're in the right direction okay now what we're gonna do is we're gonna go back to our code so here and we're gonna go ahead and delete a few files we're gonna delete app.test.js so boom it's gone logo.svj svg sorry boom gone set up tests boom gone and then app.js is what started off so app.js is this point so remember priyanshu you're asking uh how do we know the tree right so this is where we start it's called app.js here so this is where the app kind of gets rendered now we're going to go into detail as to like where things get uh sort of pop like where things how it all works and stuff like that you can read the react docs for that but at this point this is where the app sort of starts off so to get started we're going to go into header go ahead and do h1 i'm going to say this is my fancy facebook app okay hashtag fancy down hey save okay and then we're going to go ahead and change this to a lowercase a right and then i'm going to because if we like to follow something called the bem convention them naming convention let's go to app.css just delete everything right save it all index.css go here and basically you get this like annoying hidden space so just go ahead and add this one liner code so basically just defeats all the margins uh by default given you don't really want by default margins applied to your stuff so that'll get rid of it so there we go there go back to apple just save it and then we go back to our um our code over here and now oops here we go now we should be able to see if we need to get rid of the logo save it go back to our code this is my fancy facebook app hashtag fancy dinner hey all right now everything's pretty good it's working so apparently to answer your question um here we had app.js so the next layer header feed login they would go here so imagine you had like login you had header you had oh now i'm starting to get it now i'm getting the three yeah like so if this is like this so the inside of the login will be like say i am passing over prop inside of the login uh component like instead of the login file so the prompt that will that will be passed inside of the login file will be below uh below login right yeah so it would be um so we're not doing page ruling today right so just so one thing to bear in mind right now imagine we only have like one page on the website if you want to have multiple pages use something called react rooter and and if you do the clones you'll be able to see how we use it i i i know about it i know okay awesome so in this case uh imagine the login right so if we wanted to have like imagine we dived into the login component and then inside the so imagine just pretend i'm inside the login component here i'm nested in and then you'd have some kind of like i don't know user i don't know i wouldn't really have a user input i just have an input but the point is that inside of here i might collect the user right so what we might do is have a user variable at the top here and then we sort of prepare it with use state so we can go ahead and do use state i'm going to auto import it and i'm going to do no okay so now we have the user here now what you're going to see is i'm going to pass the user in at this point and obviously this wouldn't work because i don't have these components built it's going to freak out but if i just do this so imagine i needed the user all of these different things right now already when something starts to feel wrong right it's probably wrong trust me when i say that when something starts to feel like it's like oh this doesn't feel right it feels like messy then chances are it's probably wrong okay so like at this point you're like okay why am i passing it in three times it i feel like i could do something a little bit better right so at this point what you could do is introduce something like the react context a um react context api or redux now in this case uh if we did this like imagine so we had the video post and posted yes so imagine we had the feed and inside the feed so i'm just going to pretend this is inside of feed okay i know it's not a good example but it's just so we can see it in one page so imagine i had post like the post itself so post and then imagine you had another one you had a bunch of other ones so they're inside a post that means you're going to have to drill the user inside of there as well so you're going to have to do you're gonna have to pass the user from this component inside and you see your user just gets thrown around your app and it looks like it looks horrible so this isn't good coding right so what we're gonna do now is we're gonna go ahead and create we're going to go ahead and basically change our structure so rather than doing this prop drilling right we don't want this so we're going to go ahead and cut all this crap out so we're going to go ahead and get rid of all this don't want any of this stuff okay so i'm going to go ahead completely get rid of it and this will make life a little bit easier so now boom okay so what we're going to do now is instead imagine like we basically kind of add a wrapper around the app so imagine like i'm kind of like wrapping the entire app with like a global state right so imagine like we wrap it in something like this so oops let me go ahead and put it here so imagine we've got this and we've got like a global state right now what what lives inside the global state i might imagine it's just like global variables right so an example of a global variable could be the user right that means think of it this way now so obviously we still have this renders this this renders this this renders this and then this might render these things this one might render this oh no no i mean the video is not going to render here but the feed could render video post or normal post okay now imagine inside of the login.js we we get the user's data yeah so what we can do at this point is imagine let me just go ahead and write the user over here for a sec and i'm going to cut this one so imagine the users inside of our global state right now what i can do is when the user logs in i can push the user oops so much multitasking it's insane when we do this all right so i can push the user into the global state right so now the user is sitting inside of a global sort of wrapper think of it that way yeah now what's awesome about this is i need the post of i need the user over here so all i can do is i can just pretty much grab it from the uh from the global state and use it inside of post.js yeah so you see like how simple that is so rather than having all those extra additional arrows now if i need it inside of video.post i can pretty much go ahead and do that as well so i can do the same thing where i can go ahead and do um is it just like slide changing yeah so i can go ahead and do video post.js now okay so you see it's very very slick in how we do this right so and then say if i need it inside of the header.js i can do the same thing i can pretty much go ahead and just pop it in there right so the user can be pretty much we can push anything into the global state and we can use it anywhere in the app so this completely eradicates the prop drilling problem right now there's two global state libraries that we're going to talk about one is the most famous redux right so redux is something that we've probably heard of if you haven't you will put higher hero by at some point redux is like the think of it as the the pro sort of solution right so it's kind of like the the one that they use mostly in production right they're going to use that in production and um we're gonna they're gonna use that in production uh and then you've got the react context api right so the react context api now this one is the sort of easy easy one to implement so you've got two different libraries here redux and your react context api now don't be don't think that just because it's easier it's not as powerful the react context api is extremely powerful right so it's a very very simple like simple pattern but it's very very like once you understand the react context api it allows you to use this global state mechanism and still have everything working as you need it and redux however is a lot more difficult to implement but it uses the same pattern but it's very powerful which is why we use it in in industry while loads of companies use redux now what should you do my advice is you learn react context api use it in all of your side projects and everything because the pattern that you use in the react context api is the same pattern that you end up using in redux so if you learn it in the react context api when the basically the easy way then pretty much you you hack the system and you kind of shortcut the sort of learning curve and learning redux is a breeze so that's my advice and we're going to do that today i'm going to show you guys how we go ahead and implement this so i'm going to create a very very simple experience here so the first thing i'm going to do is i'm actually going to go ahead and create a login.js so i'm going to go ahead and do login.js and here i'm going to do rfce boom like this and rfc so this is my login component so here i'm going to say i am the login component okay and imagine in here we just have a button and this button just says login and i'm going to really exaggerate this example for a second guys yeah um so uh i'll see you later patch awesome dude um he's gotta run i'll chat with you tomorrow yeah yeah cool stuff dude oh yeah we're gonna be doing a session tomorrow so yeah cool come in yep see you then bro uh uh so now we have the logging component patch does one on one sessions with me that's what he was talking about as well if anyone wants to do that just give me a shout and we can we can arrange something um so login so now um we have the login component now we're going to keep it so simple i'm not even going to have an input file i'm just going to kind of fake the login all right so imagine when you log in it fires off a function so here we have on click um let me go ahead and admit so we have on click and then imagine this fires off a login uh log into your app function so we'll need to create that function up here so i'm gonna go ahead and say const log into app this is an arrow function and then here basically do i hate the new zoom update honestly if you if the zoom team are watching this you guys always ruin stuff so don't keep touching it do some login stuff because oh god it's so annoying um okay so login to app now here we do some login stuff right so in app.js i'm going to show you guys the first way which is the bad way okay and then i'm going to go ahead and explain it and then show how we refactor it i think that'll be the most easy way to for you guys to understand okay so user set user what we're going to do now is i'm going to pass through the set user right so i'm going to pass through set user so this is the modifier function which allows us to change the user so here i'm going to pass through that modifier here right so if i go into my login oh and also right now it's not imported so a little cool trick if you press ctrl spacebar you get this pop-up auto import boom i got the import now i am the login component shows up okay so um i saw a comment from delete b saying react context api is easy but some companies are needing redux yes but my advice to you guys is learn the react context api first and then picking up redux is a breeze so it's a little trick trust me do it that way because um i remember when i was learning i didn't i didn't even and this is a little story for you guys i didn't even know uh redux when i first landed my land in my first job i literally landed the job and i was like i used something called flux which is kind of similar right and then i said like but look but listen like i'm willing to learn this right i'm really willing to learn this and then what i did is honestly i kid you not for the entire first week of my job i pretty much went into work and on i literally downloaded a redux tutorial on youtube off youtube and i literally watched the tutorial um uh on the train to work every day and then i pretty much just like i just went with it and i went with i failed a bunch of times and eventually i just got it right um corey says sonny you literally have helped me gain years back with all these hacks honestly the the little hacks really and i appreciate that dude the little hacks really do make such a difference right they really do make such a difference and they do save you a lot of time so here we have the login component right now what i'm going to say now is imagine the user right so here on the on the app.js so at this top level right i'm going to have this is the fancy facebook app you are logged you are you i'm just going to say you might be logged in right you might be logged in actually i'll show you guys i'll show you guys the proper way we'll do some jsx and i'm going to say if you if there is a user oh man it keeps taking my focus if you are a user then we're going to say the i'm going to use backticks say the user logged in is and then i'll render the user otherwise if there is no user so this is something called a ternary uh then go ahead and do the following so we're going to say backticks we're going to say i don't really need a backtick say no user is logged in okay save it um back to the boom so now if we go to our app it says no user is logged in okay so i'm going to go ahead and zoom in so it says no user is logged in right now so but when i click login so priyanshu asked earlier where do i pass in the props so whenever you render create a function the props come through as a as an argument here right so okay yeah so here i pass something in a set user the name was set user so here to access it all i need to do is say props props.user yep exactly or you can do the es6 standard and you kind of like destructure here and you just get the set user out of it so this means that you're kind of breaking apart the object at this point and you you don't so now i don't know that's cool yeah so you could just do that that's like something which is kind of cool you can definitely go ahead and do that yeah um so but the reason why when i'm teaching it the reason why i don't like to do is because those people who don't know destructuring may not know that like what i'm talking about so that's why i did this right so imagine when we click the log into that button i do props dot set user and then here i say let's just say sunny okay or i'm gonna do a little cloud shout out go ahead and follow my instagram okay so sssanga um there we go so you got that right so now when i log in it should this is what this is the theory right now okay we're going to go ahead and we pass insert user and then when i click login it should go ahead and set the user to sanger and then it will basically go ahead and it should now re-render and say the user logged in is anger okay so go back and if i go back refresh then i'm going to click log in okay the user logged in is this is anger okay which is awesome if we're destructing it yeah it would just be uh set user and then parentheses and then like yes whatever you want to put in it right exactly yeah exactly uh somebody else was about to ask a question what was that one no it's not a question i just asked what is your full name oh sergeant sunny sings anger yeah okay okay dope um sunny can you please explain the condition again yeah so i'll explain this condition yeah so this is something we call a ternary right so here user is basically uh so here we're saying if the user exists so yeah so if this if this uh user exists then we're basically going to go ahead and say the user logged in is this so basically this is like this can be any kind of boolean right so if this is true it will go here and if it's false it will go here all right now if you're not familiar with turn of ternary i keep calling it tertiary thank you leaf uh for explaining that but yeah um i i always forget that i always call it ternary tertiary whatever it is but ternary opera yeah and this is really handy in jsx so this will make your your stuff really clean and very concise um so that's going to help you out a lot so so sunny the javascript version of that would be if user yeah blah blah blah exactly the user logged in as blah blah blah yes so literally you have this this is a compressed notation exactly you have something like this like the conditional class simple way in one sentence conditional clause yeah try not to to to use the word class the reason being is because class can get thrown around and react and it kind of froze everyone around you said clause not class oh oh sorry sorry yeah close yeah i mean we cannot use this statement in the jsx right yeah exactly so so in jsx you can't use this which is why i use ternary plus i mean like look at the chunk of this compared to this like it's very clean so um try and get used to that but yeah that's a good question um so now guys what we're going to show i'm going to show you so the reason why that works in the jsx can you do multiple levels of ternaries like uh if this then another uh instead of true add another condition so you can you can you go level down how many levels down can you go you can so imagine like if there's a user um okay if there's a user and the user is equal to sasanga then you see it can it can get a bit messy now though okay okay then you can say that okay sonny is logged in yeah else someone else is logged in else no user is like this all right so you can get confused have i logged in sonny is logged in yeah your board that whiteboard uh no i wasn't doing the whiteboard uh i was just showing this one you might need to but don't yeah don't don't do it like honestly i wouldn't say i would just try there might be some other ways to do that yeah and to be honest if you find yourself doing that remember your code should be uh somewhat of like very very easy to maintain and sort of you know um [Music] uh like read and if you do that it kind of becomes like uh you know like it gets so nested and messy it kind of gets a bit annoying to read so i would i would avoid doing that but now we've got the set user so that's how so i hope that made sense for you guys so now when we use set user we're basically that was the first way right that's the first way of doing it now what i'm going to do is i'm going to implement the react context api very quickly i'm not going to jump too far into it because i just want to show you guys the sort of um a quick breakdown of how to do it so uh and this is my advice to you i never remember off the top of my head the files i need to do okay i literally would i don't know i do it once and then i just fall back to an old file so literally right now i'm gonna go ahead and go ahead and say open i'm going to say clone which clone have i got on my computer uh i've got so many clones let's go ahead and go open up the amazon clone okay so boom and open up the amazon clone and then here in the amazon clone i'm going to go down and i'm basically just going to go ahead and drag some code into my workspace go add folder to workspace and now what i'm going to do is rather than remembering every time i just go ahead i know i need this file i need state provider so i'm going to go ahead copy the state provider.js here right so this again all you need to do i'll explain this in a sec but you need the state provider i need a reducer so i'm going to go ahead and grab a reducer.js i'm going to paste it inside and then i'm going to go ahead and grab a in index.js so you see here we need to wrap our components so i need to go inside of index.js and basically i'm going to go into my index.js and just wrap it from amazon right yeah so this is just from the amazon clone but honestly like all you need to do is you don't need to stress about like oh man didn't actually catch what he did there i'll quickly show you guys how i wired it and look honestly this is um uh let me go ahead and god some people are super annoying on youtube uh okay so now what we're going to do is i'm going to pretty much remove this file actually i'll keep it in there for now a little bit but the point is so a few changes happened here we've got one and we've got state provider.js now this one is basically preparing the data layer so this global state okay this is basically preparing the global state and what we're going to do is we're going to go ahead and um here we do a bunch of imports and then here we say export con state context equals create context right so here what we're doing is we're basically this is using this is basically preparing the concept the context so this one which in the context in this case is just think of it as the global state okay then this is basically what allows us to wrap app.js see inside of index here so this is basically so literally think of it as this wrapper is the state provider see that because it's literally providing the state the global state to the app so it literally wraps it right so i hope that makes sense because it's literally just sitting around it right now this takes two things it takes an initial state and something called a reducer now if i go inside of the reducer so here i'm going to i'm going to simplify this code because we don't need any of this right now so i don't need this i don't need any of this all i need is that okay um and now this is an example of a reducer now what the hell is a reducer right so like if we have a reducer or something where remember when i said we pushed something from so imagine we're inside the login.js component and we log in and then we pop we push the user into the global store right so in order to push the user into the global store we use something called um we dispatch like an action right so in this case i would dispatch like something like like a set user action right and this would basically just contain an object which basically has the user inside of it right so imagine this kind of is like a message or so you're basically sending like a message to the data like this this global state saying hey go ahead and set the user and and this is the user i want you to set it to and then what happens is is the reducer imagine like there's this thing there's this magical thing called the reducer which basically just sits on the data there so think of it that way it literally just sits on the data there right so i'm going to use different color because that's pretty confusing but imagine we had like this and let's go ahead and do reducer you guys can see over here okay so we have the reducer now this reducer is just always listening so imagine like it's just listening around the entire data and then here it says whoa whoa i just got a message thing to set the user and this is what i'm saying it to you so inside the reducer here we have a switch which is basically saying set the user so here it's saying um return and um it's basically saying return whatever the original state looked like so remember like this is the global state so this is called a spread operator i'm not going to dive too much into a spread but basically you want to make sure that you keep whatever the state currently was and then then we're going to just change the user and then remember it passed an action which is this thing and then action.user allows us to get this thing this little message right so now what we're saying is okay we push the message and it pretty much goes ahead and changes the user and then if it doesn't say for example i passed in a message like uh update user to someone and we don't have that listen nothing's listening to it here so by default we just return the original state it doesn't break anything right now um thank you as well because i saw loads of people said they liked that explanation um inside of inside of youtube so that's awesome uh okay so now yes honey just a quick question cover so how do you know which is local state and which is global state insider code editor i don't like i can't differentiate between a global and local one okay so [Music] i'll show you the way to look at it is imagine we're inside of app.js right here this is like you can see this is local state because i'm literally declaring it here the variable's here and this is being used here yeah now the way i would pull it from the global state so imagine i've got my reducer the store by the initial state is this right the user and then if i go ahead and i've got a snippet of code somewhere here i think it's this one yeah oh okay so if it's outside a function like then it's global uh no no i'll show you how it works now so uh back to our code so forget the amazon code for now so uh to so i can pull the user from our local state here right so by default this is pretty much where i define it where i use it everything like that now here if i want to pull it from the global state i basically need to say this right so this is how we do it so you say const and then you basically get two or two things so let's just comment out the local one we basically get the state and then we get this special thing called dispatch right okay so we get a state and then something called dispatch now um here we have use state value so i need to import this and this is from the state provider so that file that we created earlier this one here right and what this is doing is it's basically going ahead and it gives you two things it gives you the global state and it gives you a dispatch now if i want to get it from here i can say state.user right and then this will basically go ahead and say state.user so now it's getting it from the global state yeah but remember you can do es6 you can also break it down like this pretend she loves that so you can pretty much go ahead and do this and then boom yeah but you see uh in one of your clones you name the file state provider you named it that layer yeah yeah because i was trying to test if it was easier for you guys to understand with data layer um because basically essentially just think of this this is the state provider right it's kind of like this thing uh but think of it also as the data layer that's how i kind of explain it and you can get more complicated you can have different layers of the data layer and then in redux you call that slices of state so you can have different reducers and and stuff like that but whenever i asked because i wanted you i wanted to ask you what's the standard like which would be better to use so right now i would just use state provider um again it doesn't matter too much at this point um just learn the pattern right so i have a question yeah i think the reducer acts as a switch between the data layer and the components is that right yeah um so okay so imagine this is the reducer right yes so it does it has a switch inside of it because it's listening to different actions right it's trying to like say hey like what kind of action came in right so what kind of action came in um and then think of it in a way that so i'm going to go ahead and pull up a diagram quickly because i think this might actually help us out so let's go ahead and type in redux or something like that all right so redux has the exact same pattern as um the sort of so let's go ahead and go here i'm going to go ahead and make this bigger so i would highly recommend that you all go ahead and read some stuff about like uh redux and stuff like that so okay so here so imagine now i've got uh so this is react and redux okay so imagine it's the same as react context api so we have the view this is the component okay the subscribe all that's saying is essentially uh just like we have here this is subscribing basically we're just pulling the user right so imagine when we had the old one so it's a state here we're basically subscribing that's that the dispatch i haven't showed you guys in exact use case but i'll show you right now so what we can do is i can copy this line of code go into login rather than doing this set user crap like this rubbish i don't want to pass this for every time no i want it to be clean i don't want to have like things passed through and all that stuff so i'm going to go ahead pull in this magic line of code here and the reason why i call this magic is because honestly once you get used to doing this it becomes very simple to go ahead and um it gets very simple to go ahead and reuse it right so this gives you the state and this dispatch dispatch is like a gun that allows you to basically shoot actions into the data layer so remember i showed you guys here so where we shoot the action into the data now right so here what i can do now is rather than prop start set user i can do dispatch and i basically just pass an object into dispatch and i basically say the type is remember inside the reducer we had set user so the type is a set user uh type of action and i'm passing a user in and in this case i'm going to make the user ursus anger right so now i've dispatched when i click the login button then when then that gets picked up inside the reducer so when i click the login button it's going to dispatch this action that gets picked up inside a reducer and then it goes and manipulates the store so here remember the store or state doesn't really matter store or state right um so now you've got the state and then here it will go ahead and basically change the user okay so it changes the user now this then because because we're subscribed it will actually update and re-render so now just give me one sec so now here what i can do is because we're mapped to the state here now everything if we've done it correctly should be working so let's go ahead it says state provider is not defined on index.js so here i need to go ahead and import state provider so i'm just going to say import state provider from state provider there you go and then go back refresh state provider does not contain default okay means to explicit and there we go okay so this is my fancy facebook app hashtag fancy dinner i'm looking component login oh something happened right let's check out what happened so what i do is when i debug this i'll show you guys i'm going to open up my inspector and i'm going to click the console and nothing seemed to happen right it just kind of went disappeared so the first thing to debug right what i like to do is i like to go to producer.js and inside here i like to do console.log i always log out my action so this shows me did this action actually get fired off this one right here right so let's check it out so i'm gonna go ahead and click login okay so if i actually fired off the action type was set user the user was sssanger okay so what i can do now is i can go ahead go back to my code check it out and say okay action.user cool um yep this is cool and then i can go back to my app and here it says state.user so really i mean at this point oh okay so remember this one we didn't actually change it so we had that double tertiary and that's again a bad reason another reason why you shouldn't do that so i'm gonna say logged in as state dot user so save let's go back and now refresh login oh nice so you see it just flew through the entire cycle there okay so literally the entire redux cycle this entire cycle just processed and then it re-rendered so here logged in as and to prove that i'm not lying to you guys if i go into login.js and i type in like uh let's just say like priyanshu so let's say like he's about to log in so now if i go refresh and i go boom logged in as pre-entry right so dispatch the action set user and shoe i hope i spot it right um and then yeah and there you go yeah so you see like this whole cycle works really really nice okay um [Music] yes yes exactly so you see what he's saying here guys you see i passed in uh an action and then here was user right um and i'm sorry in login i dispatched a type and then a user and then here you have to match action.user to that to that exact same key so if i change this to like username then this in the reducer would have to be action.username even if i mapped it to user the action dot would have to be the same so you want to keep it consistent to be simple okay right now this is awesome yeah yeah just one quick question i have worked with flux in the past so there we used to have lots of stores right yeah but in uh redux as yeah you showed the diagram we had only one store so is it like uh in redux we only have one store is that the limitation or something that is created for say so good question to answer it the first thing is i also learned flux so uh if you are doing flux it's going to be really kind of easy for you to move across to answer your question though this is the react context api being used in a uh redux like fashion um we are going to be covering redux i see so many people asking about it in in chats yes but we are going to be covering it now um so this is the react context api okay and also jose says is it redux hooks anything with hooks is not redux it's react hooks is react um yeah so now to answer your question inside of the direct context api you can have multiple stores but in this case i've only used one and now sort of maybe might not teach that just yet but in redux you can actually have the practice is to break it up into multiple stores yes so you would have like the user store the basket store the products yeah i mean it depends how granularly you want to get but to answer your question the practice is yes to split your code up into different stores okay yes so sorry you just went through the redux flow right you just demonstrated the redux pattern between no yeah this one right there yep did you just demonstrate this so there is is there is there anything more to redux than this i mean where is the where does the integration with postgres sequel or sequel where does that is that downstream upstream um so so don't that's just completely forget about uh postgres and sequel and stuff because that's a whole different department okay as such uh to do that you you need to start doing requests and that kind of is completely separate from what we're doing here um so try and think of it separate to that but yes we we kind of ran through the same pattern that redux uses uh but right now what we're going to be doing thank you so much calvin kopanda by the way five uh dollar donation he goes i'm a simple man it's here live session with sonny i click i appreciate all the value keep giving us feeling more comfortable thank you so much dude um but yeah what i was going to say is um joe to to answer your question you in redux you have things like middlewares right so imagine every time you went through this flow right so imagine you went through this flow you can have something middle west and then for example you can have a middleware uh i can't remember which point it is i think it might be like here or here but basically you can have an action that dispatches every time the middleweight could be simple thing it could be like logging out every action and it can also be something which is super like uh sort of technical like check if the user is logged in every time this cycle runs but that could be a separate like a node.js kind of an interaction uh separate independent of of this pattern basically uh you can you can really customize it to do whatever you want honestly you can have a middleware which makes a request i wouldn't say it's a good idea because every time you change anything it might go ahead and make a request to your network which isn't the best thing to do but uh i think what we'll do now is i'll show you how to implement redux because we've never done that on a on a stream or core or anything and i think that would be really handy for you guys so uh you guys saw now right like it was actually pretty simple like i know it may not seem 100 simple but in reality with a little bit of practice this would be you'll get very comfortable with this right uh you get i never thought about that idea said reduce plus flux equals redux or maybe yeah um sunny [Music] yep uh okay i'm gonna answer both questions just one of you drum jump in first okay i'll go first then um so could i see your index.js file yep okay so why did we add the state state provider here okay so remember here we have the wrapper right so yeah this kind of wrapper around the index imagine what is it what it's actually kind of doing is you're kind of wrapping uh so yeah think of it like this because what you're doing is you're providing the entire state so that global state to the entire app so that's why it's kind of nested inside of it you see that right yeah now we call this something called a higher order component so this if you want to look into it more this is called a higher order component as in i'm referring to state provider and the reason why it's called a higher order complex i would recommend maybe reading into higher order components that they're usually called hlc and they are kind of confusing at first i remember when i first learned about i was like what the hell how the hell do you use this they made sense afterwards and basically the whole point is it just enhances this so now by wrapping it inside of this it means that any level below so app or anything underneath app so like login for example means that i can use things like the stake without providing state for the app right um providing state things like yeah yeah yes yes yes you're providing state for the app exactly so it's literally providing state for the app yeah uh i sony i have a question yeah for the straight providers state provider for example we have uh a sudden uh let's say group where we only want to pass certain parameters to a certain component so do we then wrap that component in a different state provider or it's gonna be the same for the you know whole app thing for example let's say for header we want to only pass certain things to header but no other part of the app can access that component those values right so you can you could i mean what you could do right is you can create rather than a state provider you could provide something like a a user provider right and then what you would do is inside of here you would basically only wrap this with the user provider right so you'd do everything but then you would have a user reducer in that case as well right so you would have user provider like this and yes that's actually a really good that kind of like clicked something in my head as well actually there's a good question um it's warmer down there yeah so you could do this and this would mean that only the um the login would get the user provider values and capabilities okay right so that's actually a really good question yeah thank you for that and before i answered shrieker's question somebody else jumped in who was uh yeah funny i was just looking for the state provider explanation what we are doing in this gateway okay we are creating context api and something else okay awesome so that makes sense now yeah okay perfect all right so i have a question right now last question and then we'll move on yep can you summarize the flow again between classes yeah so between you mean explain the flow here no in the code okay yeah so the way i understand this be careful dude uh try not to have an echo i'm gonna go ahead and mute everyone just unmute yourself if you uh whoever was asking the question okay so to explain it again very quickly um we have index.js this state provider provides state to app right inside of app we can pull values from the state with this line of code right inside of login and then we can use the value like this state.user inside of login we pretty much when we click the login button we can have this dispatch and we basically dispatch an action now the reducer is always listening to actions so in this case it picked up the set user action okay what this does is it modifies the state when we hear set user it modifies the state like so and then in login.js app.js this is where it gets re-rendered so that's the entire state uh funny just like in amazon clone we have created a reducer for products right here we created a reducer for user so for different uh we have to create different routines so so right now it's one i didn't create a user reducer i created one reducer for everything here we haven't done any sort of separation um so here um this would go ahead and we can say uh like say for example you had products or basket right here you could have a basket which is an empty basket right um so but it depends you can have different providers we're not going to go into that right now i do kind of want to get into redux right now because i think it's going to benefit the most people so let's kind of put a hole in questions for now and move on to redux because that's going to be the most invaluable part of this right so i want you guys to take a mental sort of like maybe you can pause the video so i have a screenshot or something but you guys can go ahead and and snap this but the point is is that this is you saw in terms of the code itself it's extremely clean um and believe me i've been in like production environments and huge production environments this is pretty clean code like as and i'll say i'll tell you that like yes you can always make code cleaner and neater and like this can be like an object see it's no longer like you can do you can always improve something but in this case um yeah we can so neha says uh we should have joined earlier can you please let us know the agenda to me sir yes i'll try my best um i did mention in the beginning of the call but maybe earlier inside the announcement i could do that as well so uh now but now we're going to go ahead and learn redux so i'm going to show you guys i'm pretty much going to get rid of all of the react context api stuff and to show you how quick it was pretty much look i get rid of that i go inside my login i'm going to get rid of that i'm actually going to just get rid of the login stuff and say logins happens here and then go here boom get rid of this get rid of this go back to here and then i'm just going to give this and say the user is this is kind of like dummy code right now it's not really doing anything got rid of state provider and get rid of the reducer and now we're back to square one so inside my react app state provider is still being run pulled in from here there we go so now we have the fancy facebook dinner hashtag fancy dinner app so this login component doesn't do anything now okay um a question will state provider and reduce the path redux or context api flow um so don to answer your question state provider and reducer was part of the context api flow but the pattern is consistent amongst redux and react context api so if you are confused just remember learn the pattern um through the react context api because it's easier to do that and then shift and use that knowledge on redux that's going to be the most beneficial way of learning redux it's going to be the most easy way of learning redux if i could put it this way if i could have had someone sort of give me a cheat right like a cheat code to sort of like shortcut all the headache and all that sort of stuff i would have pretty much gone ahead and done um i would have pretty much gone ahead and made it so that let me go ahead and do this i would have made it so that um i actually learned the react context api unfortunately wasn't available when i started learning the first time but i would have learned the react context api and then i would have shifted my knowledge over to redux because it made it super easy to understand right um okay so now what we're gonna do guys is i'm gonna share my screen again um boom okay so now so this is a really awesome example because i forgot how to implement redux so you guys are gonna see it completely from scratch non-biased nice fresh slate okay so what we're gonna do now is i'm gonna go to redux and here i'm going to go ahead and uh type in so i'm not going to google image i'm just going to type in redux boom getting started with redux okay so this will be interesting because i can't remember how to do it so it'll be pretty cool so npm in store so pretty much and this is make sure like you guys really like sort of like i want you to pay attention to a few things when we have this sort of tutorial right now because one thing is going to be the sort of experience the um the natural sort of like okay so he's a developer he's been coding for ages too but he also gets stuck like kind of normalize that right because it's not like i know the answer to everything it's kind of like okay you know um it will go ahead and it will make it a lot easier for you to do this this is dope by the way i just saw um it says here create react app actually has a template now for redux so i mean we could go ahead and do that let's go ahead and try that in a sec but i'll show you guys um actually not let's go ahead and do it let's do that because that might be really cool for you guys to go ahead and learn so um also for everyone on youtube saying um it's already developed up they're showing today no it's this is uh this is fresh code dude so you're going in timeout so now what i'm going to do is i'm going to go ahead and um i'm going to cut the app that's running and basically i'm going to go out of this folder and i'm going to create another one so i'm going to say mpx and you see here it says mpx create react app my apps are the name and i'm going to use this this special option now okay so you guys can see here right so i've got oops all right then the mpx create react app i'm going to change the name i'm going to say this is called the redux example right and then i'm going to say template redux right now this is really cool because i haven't when i made when i first used redux they didn't have this template okay so i'm gonna go ahead and hit enter and let's go ahead and see what that does so while that's doing any questions guys uh just one question when how to decide like when to use context api and flux and litex i know that the flux is not being used in production environment on large apps but as for context api as you told a relay is also coming up so keeping that aside how to decide for which should we go right so good question uh to answer your question in a nutshell what i would say is um you want to basically go ahead and use so don't use flux because you have two better solutions i would use react context api personally if it was a personal project i'd use react context api i would then jump on to the uh the um if if needed or it feels like a professional job so put it this way i've used so many i've done so many professional jobs and freelancing jobs with the react context api because it's simple it does the job why am i i don't need to over complicate the build if i don't need to so i would use that right now if i'm in a pro like a commercial environment so i'm in a job and things like that and chances are they're going to be using redux because and there's for obvious reasons why um you'll pretty much experience that yourself when you start using it um but yeah so to answer your question very shortly um i would use i wouldn't use flux i would use react context api and then use um the uh then use redux yes yep okay okay yeah yeah which one is any yeah sunny i just wanted to uh go through that explanation of context ap again just wanted to tell you my understanding and in case if it's wrong if you can just correct it yeah uh um so i will say to that is i'll give you a quick breakdown on the on the um let me go ahead and share my screen so i'll give you uh oh god damn it uh here we go so i'll give you a quick breakdown on the diagram but beyond that what i would say is re-watch the video go through the build again and kind of watch it that way because that way it will benefit the most people on the core right now so the purpose is is that it provides a data layer so you have this entire data layer around the app okay now it basically this is going to be your component uh for example the logging component when you click the login button it dispatches a login sort of set user action at this point the producer is always listening to any actions that get dispatched so it basically goes ahead and modifies the state so it sets the new user the new user because it's changed and because we've subscribed to it inside the component causes react to re-render right and that's basically the flow of what happens now i would say if you're still stuck make sure you just go ahead and play with it because honestly as much as i will explain it now oh guys please watch the mics because it's like got some i've got some really crystal clear headphones and that really just chewed my eye off sunny i have a question uh regarding the comm and you wrote uh so so to have redux uh in our project we need to have a dash dash template redux yeah i'm still i'm getting back to that now so we're going to jump into that in a sec yep uh guys i'm going to mute everyone again because the mic so nope that's not happening damn it yeah okay that literally was creeping up on my ear uh so careful guys because you meet yourself sony oh man i made it yourself sonny yeah now we're good yeah yes very good all right so gonna carry on now guys so uh here so we have the redux example okay so i'm going to go cd redux example boom we're inside code insiders dot and then what we'll do is open up another window so i can go ahead and close my old one i don't want to save this one i don't care about that uh and i'm going to make it full screen i'm going to zoom out a bit because i can't see anything and you guys can see my screen right now yeah yes okay so it's got a bunch of things now so this is this looks a little bit different right so and you can see i've got loads of stuff here so i'm going to go ahead and spin this up so i'm going to say npm start and go ahead and do it so right so now rather than this isn't the old app we don't have this anymore um once it goes okay so now it's compiled so you see okay let me zoom back out there we go okay this is kind of cool actually all right so you get this as your starter template uh and then what we can do is that plus boom add amount okay so this adds like two to each if i had like 10 add amount 18 28. okay awesome add async oh nice okay so that asynchronously adds 10 to it so anyone that doesn't know what async is it means that it's not a media it's kind of like asynchronously so asynchronous just means there's a delay so usually when you do a network course asynchronous because you kind of say you fetch some information from google it's going to take like 15 minutes on 50 minutes like like a few milliseconds to come back so you're going to have that little delay so if i go ahead and do async imagine i clicked it and then boom it comes back right this is kind of cool actually so now what we'll do is we'll dive into the code and we'll explain what's going on so um what i'm gonna do is we've got this special counter component so in features that's where they've made the counter component so i'm going to hide that for a second you can see there's loads of code running around here right so we're going to go ahead and make sense of this for you guys counter.module.css so this is just css file counter slice is um again so you see redux right redux looks a lot more complicated right it looks a lot more complicated um but the truth is it's not as complicated as you think right so what i would say is my my my biggest advice to you guys is to go ahead and do exactly what i did now so install the template and then go to here for example right go to getting started with redux and pretty much you can go ahead and look and you see you've got the basic example where you can pretty much go ahead and see like think of it this way look so this is that producer that we saw in the react context api remember it had a switch a case and a case and then a default right and then you created the store and then basically you can subscribe to the store and you can dispatch actions from the store which is basically when we did login and it we went we wanted to go ahead and do um uh set user right so it did that now uh let's go here to learn redux okay so now we don't need to care about this so i'm gonna go ahead and dive into the code now so let's go back here so now what i'm going to do is i'm just going to grasp on what's going on so i'm going to delete everything i don't need so app.test.js i'm going to go to logo.svg delete setup test.js boom delete okay now index.js can you see the same thing we have a provider right provider surrounds app.js okay so i want you guys to first notice how the the approach is the same we have like a component which surrounds app right and then that injects basically the the store into the app okay now i'm gonna go to app i'm gonna go to store.js now you can see and this one the store is very simple okay so the store is very very simple it's very clean we don't really have much in here so i'm gonna go ahead and just i'm just opening up the chat in case anyone's saying um okay so brandon d is it just me or zoom flickering it's because i'm running quite a lot of um like screen sharing stuff going on at one time so it can kind of flicker a little bit at times uh see you later cory as well thank you for joining bro um okay so here what i'm doing is i'm configuring the store so basically redux has changed a lot actually since i used it last so now they have this toolkit okay so this toolkit is basically saying configure store and it's just exporting it so here we can pretty much say export default configure store and then you're passing in a reducer and this reducer has a counter and then you're basically saying the counter reducer now the reason why this this actually makes a lot of sense it's kind of cool actually so now let's go ahead and look at this so inside of features counter counter slice so let's go inside of here so this so basically inside of uh redux the way i want you to think of it right is in redux imagine this is the data layer okay and inside of it we have the app right and then obviously inside of app.js you have everything else okay so imagine this is app.js oops oh app.js there we go all right so imagine we have and then obviously everything renders inside of app.js right so that's why i'm doing this now previously we just saw it as one layer right so it's like imagine like layers of an onion right you just had one layer right but what redux does is it gives you several layers so you can actually have like several different layers and you and these would just be like different stores now why would we want several layers uh the reason is because you might want one layer which is primarily going to hold the user stuff right so this one could be called uh the user just think of it right now as like the user layer right and another one could be like the basket layer right so another one could be the basket layer so basically the user layer would only have information about the user right so it will basically all the logging here and all that stuff would only happen in the user layer the basket layer would be everything that's inside the basket so it would be like add to basket remove from basket that's what the reducer it would have its own reducer the user would have the its own reducer so in redux we now have concept of multiple layers and you can do that in react context api but it's more you see it happen more in um inside of redux so now and what we call guys is these um these layers we call them slices okay so this is called a slice of state or slice of the store and it makes sense because you're basically slicing a slice like you're basically slicing a piece of the store right so you're basically like slicing it up into layers okay so we call this so it says create slice so in this case we've got the counter slice and this one is purely responsible for just that counter okay now it has a name okay it has an initial state so remember it's it's a very similar so remember in the reducer of react context api we had an initial state so here we have an initial state um and then we have a value of zero and then here inside of reducers we have an increment function we have a decrement function and we have an increment by amount so these are basically those actions that we spoke about before okay and we basically export this into this counter slice to action so let's go ahead and go over to um sonny i had a question go for it can you go back to your diagram yep so uh the is it uh okay to believe that the basket the user layer would have everything that the basket layer has plus more or are there two independent layers that have nothing to do with each other it's totally isolated compartments very that's a really good question and to answer it they're completely independent so they're isolated from one another and the reason why they're isolated from one another is to reduce complexity so anything like logging in um anything to do with the user goes in the user layer anything to do with basket stuff goes into basket and now this is really important because imagine you had a huge app right you've got thousands of like hundreds of developers working on one app you need this kind of isolation otherwise like if if they're all interlinked it would get so crazy so fast and it would be so chaotic to be able to do anything because then stuff that happens in here is gonna break stuff that happens elsewhere and it just starts to get really kind of you know a bit crazy and then how do i if i need to access the other layer do i still use the props way to to get it around uh i'll actually show you how we create two layers okay yeah because because i can't remember as well so it'd be awesome to go ahead and do that yeah sorry that's basically follows the react react component design pattern right yes so it splits into components don't think of it as components think of this as a sort of a concept because this is yeah the concept yeah this is kind of a con this is a component app.js header.js post.js they're components this is kind of just like think of it as like layers which kind of go around the components and the reason the easiest way is in index suggest this is basically the layer that has all of those slices in and then it just gets provided to our component app which then renders to several other components underneath it uh sunny i have a question for you since you're talking about the layer slices and the first slice will be login right if i don't have an access to the login then i cannot go further right so i wouldn't do a login i would do a user layer oh i'll do it yes yeah i'd have a user slice yeah yeah user uh so it is uh an in encapsulated uh this other slices in store uh in user layer right no so so just think of it as like so the user layer would just have a user object inside of it it would have a few it would reduce the user reducer would have like actions which listen to you like logging in logging out basket will have the the basket array inside of it it would have actions for adding item to basket removing item from basket and then in any other components i can just pull from whatever i need to no i think what he's trying to do what he's trying to ask is whether they whether the user layer the other layers have dependency on the user layer which no no no so they're completely separate just they're completely separate layers they don't know yeah uh so you're saying uh like in a uh like in a amazon um kind of clone uh without login i can add into the basket it is a separate layer and when i logged in then it will be stored in into my account right no so okay but try and separate so this is a question i get quite a lot try and really separate your understanding of the layers with with like um because what can tend to happen is you're right now you're mixing understanding of of um like the apps or the amazon app like storing things in your basket and your account being stored in your account with concepts with concepts of like of programming and remember yes to amazon you might be storing things on your account or inside your account but that's because you you make a network request to push data to a database you see that there's a whole nother thing to to approach right so absolutely yes i would say try and try and keep them separate um yeah okay so sonny um can we do the same thing what we are doing in redux in using uh context api yeah so you mean the layers like yeah yeah yeah yeah we can we can do it um i'll figure out how to do it and then i'll show you guys how to do it but the point is is that honestly i would recommend doing the single layer approach with with the react context api and then using it and guys the reason why i'm saying this yeah is because i've made a serious like a decent amount of money like when when with freelancing just using one layer with the react context api and it served the purpose for many jobs now sure when i've gone into production environments and i've been hired as a developer they've been redux environments where it's gonna it gets really nested it gets quite integrated it kind of gets a bit you know it gets quite involved in that sort of stuff now i would say my my main thing here is is just understand the pattern um with the react context api and then just practice the slices in redux uh and then and then whatever you decide to do you can pretty much go ahead and mix and match pursue whatever you want to do but that would be my main advice here for how to approach you know like what what you should be working on and what you shouldn't be wanting and that sort of stuff so so somebody asked a question like when do we use react context api and when do we use redux so redux is for like when the application gets very complicated so it's better to use redux because we can make use of this multiple data layers and all these things and for simple applications like you know which doesn't involve uh much data and everything so we can use context api is that is that true yeah so i would say keep it very simple so keep it very um keep it like super simple in the sense of like and then put it this way i would always vouch for using the react context api first and then i would about then i would kind of move to redux only if needed right um like i wouldn't honestly relax is heavy like like you see like the code here is it's it's quite heavy code like is in this is quite a lot of code whereas react context api i didn't have to do much but i had like a crazy amount of code right um so my advice would be to maybe just focus on whatever the simplest option is right now bear in mind if you've got a contract for a year and um so muhammad imran says why are you only comparing easy to be even better that's not what i'm saying i'm not saying pick the easy one to be better i'm saying be smart if you're if you have a job which has like you know there's going to be 30 developers it's a startup company it needs to grow yeah then maybe the decision to think about is maybe it's better to implement redux from the get-go but don't always think that just because redux is the one that's used more than one that's sort of like in practice that's the better one because right things come along and are better in time just like the improved redux now so that now you've got all this sort of create slices and things like that but um try not to get sort of carried away with just whatever's um it's not always whatever's but in my opinion keep it as simple as it needs to be until needed until you need the complexity yeah so i can actually went down that same route and i uh when i learned it yeah what they said the difference was is if you're using redux that's for uh data that's constantly being updated over and over and integrating versus use context is more or less if you're not really updating the data as much or it's a simple application yes exactly so simple application because uh is so so actually the way we use the context api is different to how a lot of people use it they usually use it for like themes or dark mode or things like that so so options which aren't going to get updated much but i kind of modified it so it kind of follows the redux pattern and i teach it in that way so we kind of get redux functionality but not with so much you know um somebody said nazim said something can you simplify clean up the code for better understanding to get the same pattern as read context api the pattern is already the same with this code uh nazim it's just the case of you can't clean up code remember yes just because there was less code doesn't mean it's this is actually extremely clean code this is actually really really clean code which is why this is my first time looking at this new implementation and i can i can understand what's going on so um well i'll show you let's jump into the code and i think it'll make a lot more sense so before you go go to the code i have one small question for you final question yeah any place where i can get into react context api what do you mean any uh tutorial another tutorial where i can i would i would say honestly go ahead and just just look at the react docs okay yeah thank you the react docs are the best yeah okay um okay so here we have the reduce with increment decrement and let's just find where this is used so right so let's go to our counter and here we can see uh increment set increment um no this is increment amount but you can see we're pulling all the actions from counter slice right so we're pulling like increment from counter slice and then here you can see a dispatch and increment action right and dispatch this and this this and then you can hear set increment amount and then increment by amount and then here they're doing some special but the point is is that what we're going to do now is i don't like how they've done all this they're kind of over complicated some stuff but what i'm going to do is i'm going to make another folder right so i'm going to show you guys okay another folder and this one's going to be called let's call it the user so now we're going to try and recreate what we did yeah so again like i'm going to try and sort of do this from the beginning so we're going to say user and here i'm going to have a login component say login.js rfce boom and this is gonna say h2 i am the login component okay um and now what we're gonna do is unlocking components there we go and then inside of inside of my app.js i think i'm rendering out logo there we go get rid of that save it and you also have to get rid of the image tag yeah so it's new oh yeah nice thank you and then here we go back and now you can see we've got this right now obviously at the top i'm just for now i'm going to keep it super simple above everything i'm going to render our login component this is the one that we just created boom now we have i'm logging component at the top yeah so we're all familiar with this one right so ignore the stuff at the bottom for now we're going to use it as reference this is my truth be told right try and get used to being familiar with the unfamiliar now that that kind of like doesn't make sense at first but what i mean by this is for example right now i forgot how to code in redux no not forgot how to call it arenas but i forgot the exact sort i mean you don't need to memorize this you just need to know the pattern so i can get all of this working but i don't need to remember every single line of code and everything all i need to know is how it works and then you pretty much can go ahead uh and build it so try and get used to being in that situation and and and working in that way and then it will make your life a lot easier because you'll be able to pick up on especially when you go into a production environment um you're pretty much gonna understand um uh you're pretty much gonna you're gonna be able to move into a new environment which is very intimidating very sort of like oh my god i have no idea what's going on here but you're going to be better at understanding that right because then you're going to be able to dive into anything and sort of learn build that that um build that that sort of skill so yeah get familiar with the unfamiliar um uh also ganesh from uk manchester awesome dude nice um so login so now we're gonna basically go ahead go into our login component and i'm gonna look at the counter.js right so let's see how they've done it so they created this counter slice so inside of user i'm going to create a user slice so i'm going to create a user slice and what i'm going to do is i'm going to literally going to copy the code from counter slice into user slice i'm going to rename everything that i want so the name is going to be user it's not going to be you counter slice it's going to be user slice the initial state is not going to be value it's going to be a user with no right here is the reducer so i don't need any of this stuff what i'm going to have is i'm going to have something like set user which takes the state and it basically goes ahead and says it's going to take a state and an action so this is the same pattern we did before and it's basically going to go ahead and say state dot user is equal to action dot user so i think that's how you do it and then we can also make another action called log out oops let's make one called log out and this one is basically going to say state.user is equal to no so these are two actions right and i'm going to go ahead and get rid of this and then we need to go ahead and export these so export that one export that one delete this one and you can see it says counter size this is not the counter slice this is the user slice and i go down and i don't need any of this select count [Music] selectors right selectors are really cool selectors exist both in um in react context api and in redux and the selector is basically just a piece of code that's for example here we can say select count so this one because i select user basically it just goes into the state and in this case we're just going to go ahead and return the user now this is a very basic version but imagine you had select basket lens right then you would have it will basically have a reduced hair which basically go ahead and tell you oil to be like state.basket.length it's just something which is you might not see the value in it now but just know that they exist okay know that they exist and that my pedro says something then the class can you make the final code available to download uh for this one i could yeah for the redux stuff i definitely could i would say maybe try and give it a go and try and do it again alongside that might be the best way for you to learn it um because all i used was the create react app with the dash dash template redux and i got this up and running um but yeah so now we're going to do is we're going to say like we do we have to follow exactly what they do or you can modify or change different stuff like without following the same pattern um wait say that again sorry like uh what i'm seeing here is like you are just changing the names yeah and then like we follow the same pattern yeah so we have to put the same pattern is it the mask or we can change it like no so remember so this is just the way that redux is sort of written in this case this is kind of different to even how i use redux but the point is is that like it will uh so so keep watching and then i i'm pretty sure it'll answer your question in just a sec uh well yeah so here i'm going to change this to counter size to user size and i'm basically exporting the reducer right here right so export reducer save it i'm going to go into counter size here and let's see where they so now this going to our store and then here what i'm going to do is i'm going to import my user reducer from user forward slash user slice and then here uh configure store i wonder how we do this i wonder if it's the same thing and you just do it like user is a user reducer like this and then let's wonder cfo okay so apps loading and you can actually install something called the redux devtools so i think i have them installed and let's go ahead and check so i've got the redux devtools here and if we go to the state um is this is this right what is this open in a panel open open in the panel this is not right okay ignore that let's just we'll touch on that another session have i got them in here redox okay yeah yeah okay there we go so download redux uh dev tools and then right click go to your thing go here type hit redux and then you go to state and now you can see that the counter is there the user is here so redux is really cool because once you implement there here you'll be able to see all the actions that get dispatched right and you'll also be able to see you can actually rewind in time different things so i'll show you how that works right so we have i am logging component now what we're going to do is let's go to the login component and here now how do i use the user like before obviously we have that magic line which is why i love the react context api i don't know how to i don't remember how to do redux so well i'm going to go into counter digest and see how they do it so they they import everything that they need so i'm going to go ahead and push this code to the right and i'm going to go ahead and do the same thing i'm going to go ahead and import uh it was set user and it was logout these were the actions and they were from and let's go ahead and do it from the user slice okay so i'm going to go ahead and pull them actions in um and then i'm going to go ahead and pull in the use dispatch and the use selector i don't need to use this selector i just need to always get set use it instead of user oh thank you nice see that's the kind of dude that's the kind of laser vision you need that's awesome yeah um so that's good and then what we're gonna do is to get hold of the dispatch which is that little gun that sort of allows us to shoot into the data layer i can go here and go const dispatch equals use dispatch so i'm just remember literally i'm looking at how they've used it here and i'm pretty much going ahead and reusing it okay then here we don't need the increment amount blah blah and now i guess all we can do is pretty much go ahead and say um let's go ahead and try out this kind of a button which says log me in okay and on click here i'm going to do an inline function oh let's just do it we'll keep it simple as i say log in um to app so same thing that we did last time so that way you guys are a bit more familiar so we can say const login to app it's an arrow function and then here we're going to go ahead and say dispatch and i'm going to say set user which is an action and it takes a payload and the payload in this case would be a user and the user is just let's go ahead and say um sss anger okay now let's see if that works i mean if it might work so let's go ahead and log me in whoa okay so it's set the user now what i can do is i can click this go to action and i can see if i click this the type is user set user payload is a user this is anger and then i can see in the state now but look the state didn't get updated correctly so this is where we need to check what's going on okay so the state didn't get updated correctly so whereas if i do this so you see when i increment it shoots off the increment value right and you see what what's awesome here guys i want to show you something quickly if i go ahead and just focus on this increment once if i hit increment decrement yeah now check this out guys so let's go ahead and increment a bunch of times i can actually go ahead and rewind the app so i can go back to this point and it rewinds the app how sick is that so you can actually rewind the app damn that is so cool that's cool you can do that crazy so you see like this is why like you can actually rewind the app so like and what it's doing is it's just dispatching the actions as you see like they're kind of highlighted and what you can kind of has a database like we can call it like a local storage database kind of thing yeah and this is more like a debugging tool but what you can actually do is you can skip an action so if i skip an action look it skipped an increment so now it's nine i skipped this one i used from a long time i never knew this happens yeah it's awesome right you can do a lot of stuff you can even do like some kind of uh i don't know what this is but uh you can actually even gives you some testing code it actually gives you the testing code which is insane as well like it actually gives you testing code um so you can actually go ahead and add this in the test and it will go ahead and like adjust respect to redux yeah and it will let you down redux and devtools just basically makes redux way more easier to visualize and understand exactly so now if i click log me in so now for debugging right i saw this one got fired off i click on the action i saw that okay it's got the payload this looks good but something isn't working because if i check the state i haven't got the user in the state so now let's go and check out why so let me see why because this is even sort of for me this is kind of interesting so state dot value equals this okay so now what we can do is let's go to our uh user slice and here i say state dot yeah so we've got this one i'm going to push this over here and here we get action.payload ah okay so remember when we looked at this the action said payload right so my um so now you can see payload user right so here what we're going to do is we're going to say uh payload dot so now this is where i made the mistake so action dot payload dot user okay and then i'm going to go ahead and do it now so now if i do this log me in okay why is it okay there you go log me in oh okay so now this is where it gets really cool so i just hit the the user set user right and it says it shows me a diff now this is the this is the awesome right now uh thank you so much abdul uh he says you're the best i'm getting it now um and you also troy thank you so much uh really glad that you guys are actually following along with this it's really awesome to see that so we got the action and here we set a payload user right so this is this tool is really good because you see it wasn't even a hard debug step but when i did it in react context api it was kind of like this is why you can see why it's used in production environments as opposed to not being used right so now if we go to the state and i check it hey there we go and the reason why it shows in the diff now is because when i hit like this is when i initialize the app for some this is why it fires up by default then when i do user this is a set user and also redux groups things in the easy to understand way for example this is inside the user slice and it's a set user action if i do this one it's inside the counter slice increment action so it's very friendly you see that and then here the diff shows that okay this action changed the user from no to says anger now what i'm gonna do is to show you even how powerful this is we've got the log out okay so now the log out actually and you know what this is actually they've changed redux to make it a lot easier now this is actually a lot easier than it used to be um it's not inside of login.js um it's tempting me to kind of use it again so now if we go to button and here what i'll say is log out okay and here i'm going to do on click like this i'm going to have an inline function because i just want to show you both uh and then here what i'm going to say is thank you so much to our sony you're teaching is really good that makes it too easier to learn thank you dude um on click here i'm going to say uh log out okay so log out and it's just pretty much it has no uh like here is the logout uh i'm not passing anything along with it state automatically gets passed um so right now that's it now let's check it out so log me in boom set user okay log out so okay interesting nothing happened it needs to be a dispatch hey i was i was hoping somebody shot i promised you i was hoping somebody shut down nice okay awesome so dispatch there you go and you'd basically go ahead and dispatch because you remember in order to do that that sort of you need to dispatch it into the data layer so we can do that now if i go ahead and log in and um log out boom and you see if we go to set user uh it shows that we set the user to sanger log out boom it went back to no now how do we use the actual information right how do we actually go ahead and use it so let's see how they use it inside a counter so here dude where'd they pull it they've got the they've got the actual increment count so account they pull from they use a selector to pull the account okay so i wonder how we can do it so we can go ahead and do a select selector okay so i'll show you guys how to do it from a selector um and then i think i'm not sure there's a there's another way to do it as well but i'm going to show you the selector wave practice but let's go to counter slice and here is the select count this one will go no i don't want this one on the user slice here i'm going to say select the user this will go ahead and give me back the user all right so this is a selector and basically it's a it's a controlled way of going up going into your store and getting what you want because remember the controlled way of doing this stuff is going to allow you to actually go ahead and uh and work in this sort of like a more a more functional maintainable way so here select user um so here state.user now what i'm going to do is i'm going to go into login.js login.js yeah i'm going to basically so again like i'm using an example of the counter app and this is what i'm saying the templates are really good guys because you can pretty much just use it as like a reference point and remember like i said i hadn't coded in redux for a very long time but coming back i literally used the reference they gave and pretty much is easy to pick up on because i know the pattern right so here i'm rather than the count i'm getting the user and this is not select count and select user and i'm just going to go ahead and import it from here so i'm going to say select user there we go and now what i can do is i can pretty much just use the user so i can pretty much at this point say i am the login so i am the login component and then i can say if there is a user then i want to render out a h2 tag which says the user is user and then here i'm going to say else render out a h2 tag which says nobody is signed in boom okay let's go back and it says use selector is not defined because we need to go ahead and import the use selector save it go back and it says oh okay it says objects not valid there's a react chart now the reason why this is happening is because the actual user is a um oh come on what's happening let's go back here oh my mouse is bugging out one sec guys okay we're good one second guys my mouse is freaking out okay oh man i think my i think my mouse just finally died okay you know what i think we're gonna have to go back to no mouse okay right there we go back to old school track pad okay so now what we have is the um objects are not valid as a react chart so what i would do at this point to debug this is i'll comment this out and here i would do console.log user to see what i'm pulling in from the user all right let's go ahead and do that so now if i go to my console i can see i've got the user but it's no okay if i log in i can see i get the user now why was it freaking out because um console.log user and then here i was saying the user is user so user i think it's because it's got user inside of user so if we do use a dot user is that is that right or am i being a bit where no log me in yes okay so i was actually this is kind of what you've got to be careful of because remember inside of the inside of the selector here see i done state.user but it's actually the user slice is the thing so here we need to say state.user.user because if we go into counter size it's state dot counter dot value and value is the the the initial state so here it's like this is the state the overall global object and then it's the slice that we're talking about so in this case it's the user and then it's the object and in this case it is then it reaches this point right so you wanna you need to be careful of that bit right um so now let's go back and we go back to our login and here we can say user and now it says no no okay login done now we can go back get rid of this this should now be fixed so if i undo this save it it says nobody is signed in log me in boom log out boom awesome let's go to redux and have a look what happened if i now this is what this is what's cool guys if i go ahead and jump back to sign in see that the user is ssng so i'm going to jump back to sign out and i can pretty much test the actions here so really and i'm already super pumped like 2 am now cool right uh sonny it means that we don't need a automation tools it will eliminate automation tools uh no there is a time and place for an automation tool which is separate to this yeah there there is a a a time base so automation tools could be used for testing they could be used for other other use cases i wouldn't rule out automation tools to be honest i would i would um cyprus for example is an amazing automation tool because because you have different types of testing you have unit testing which is basically where you test at the code level you have something called automated testing which is like or like integration testing which is basically where you run like an automation sort of uh i guess framework or software like cyprus and basically cyprus is like say if i ran a test it would basically would do an automated test of like it would log into the app it would place an order it would check that this this this happened and then it will go back and it does all of that automatically so so there is there is a place for automation um that's separate to this try not to get this confused if anything this would be uh unit testing because here you can basically say when i click the login this is the test that needs to run for example okay and here it's saying expect the this to be the state when you just did this right so like but try we're not going to talk too much about testing because it can get very very deep into that uh there's testing frameworks like puppeteer i think one uh selenium is another one but cyprus is a really good new one uh i've used cyprus before it's really really fast um [Music] okay so um yeah so uh this uh in your slice dot js your user can we use the same spread operator like how you were doing in the context api also like for the previous values um so say that again sorry like in the uh context api you are storing the previous values also previous values on dispatch of an action so whenever i dispatch some action yeah so for example yeah so you you were actually saving some information like the previous the initial values of the state and then you were adding adding the object oh you were saying okay yeah so let's spread this yeah he's talking about the spread operator so very very good question right now what's really clever about redux is the way they've built it and the way they have this sort of toolkit that they have i say let's go inside the user you see this redux.js toolkit right now the clever thing is the way that it's built right is that this is um is something called an immutable change so even though it looks like i'm changing it directly right um but the redux toolkit actually it it cleverly does it behind the scenes without us having to do things like um um so that this is basically what it's saying so let me go ahead and make this a bit bigger so it says redux toolkit allows us to write mutating logic in reducers which means that it looks like i'm just changing the state.user right but under the hood what it's doing is it's detecting the change that i want to make and then it's doing it in a way that basically preserves the original state and it basically creates a new state right and it just updates only the things that needed to be changed but you can code it like this right which is easier and it's more safer than doing the spread right so redux talk it back in before you this wasn't actually supported so before you would have had something like this you would have had something like this you would have state dot user and then you would have user is like this you'd have something like that before right but they've upgraded the react the toolkit now so that you can pretty much just go ahead and write very simple code like this you can just pretty much say change the state.user to the action.payload.user when we set the user to be fair i automatically have the access to the earlier values also so remember the earlier values that you're talking about everything is actually inside of this so if you need the earlier values you can get them with state you can just say state dot user that's the earlier value action.payload.user is the new value yeah so here if i was to do and we can test this we can say console.log let's just say check me and here i'm going to say state let's see what it gives us back inside the state here right so now if i go into set user so let's go ahead and refresh this to console let's do set you so check me look he's got a bunch of all this widget you see we don't really they they protect you and and trust me it's very good that they protect you against this stuff because it's you don't so so this there's a principle in in like functional programming called immutability and the whole point of immutability is so you you never want to actually mutate a an object and say yeah like you never you never want to say like this object should now be this new object like because what you're doing is you're kind of overwriting the object so we do we try to stay away from that and we use something cool uh guys please use your mic mute your mic if you're not talking um yeah so okay somebody uh sonny you made it yourself yeah you did right okay yeah so uh uh yeah so so pretty much what we do is we we do something called immutable changes i would recommend reading up on immutability because i'm not going to cover it too much now but put it this way it does it updates the state in a very clever way okay so what if your console stayed that user would that have worked uh i mean we could try we different try console.userconsole.com to be honest i don't think so i think it will show you some kind of proxying stuff um okay no it did it did work yeah so if you do log me in so but this remember the initial value before i clicked this was no so that's why you saw this but it's changed now but the action.payload would have been the one so so if i now do this and i say um so let's just do it like this previous previous value previous value is i think this will answer your question previous value is this new value is action dot payload dot user okay now let's try it out so log me in previous value is no new value is ss anger [Music] and actually add the previous value and the action. i mean firstly why would you want to do that secondly you shouldn't do that um because you shouldn't you as in you i mean in a case like say i'm adding products right like into the cart and i've added like one by one why okay so if you so imagine we had like uh let me just go ahead and obviously we shouldn't have it here right but what i'm going to say is this is imagine we had a basket like an array okay what you could do is you could say like let's just say add to basket right so we had some kind of add to basket which took a state took an action and it did this right then here what we're going to say is we're going to say state dot basket equals um here i would do this i'll do whatever the state right right yeah plus i got it i got it yeah thanks thank you now that's a really good question actually because i think that would have helped a lot of other people um and then you can say action dot payload that's a really good question dude and you can say action i'll pay off the item and that's how i would do it thanks for clearing it out yeah yeah that's really that's a really good question actually yeah because i think because even uh i mean that actually made a lot of sense yeah you could do that and then that would be also um sonny about the action.payload.user do you get the metadot user there on the payload because of the name you said right at the beginning of the user slice constant you see you have a name there which you set the user this one oh no this upper okay this is this is the the name of the slice so remember this this level so the actual so imagine if we go back to um store so you see this slice this is where we name the slice so remember like those that onion pill like that sort of sort of layers all right this is the name of the set so for example if we go to the counter size the name would be counter right but here but that's what triggers the payload that's what i'm saying it's the method for payload i just tested it um no so it's actually where we do the method for the payload is actually inside of login here this one you see that that's okay that's the one so if i change this to username i'll show you so now if i go to the user slice if i change this to username now i have to change the payload here to username and if i do this and i save this now now if i go ahead and do log me in see it works like that oh but the new value is undefined so let's go to redux and just check why because it says user okay let's go to action the action.payload.username action.payload.username uh username and then [Music] state.user equals actually in console log you have to change the user to username yes most likely yeah yeah yes yes yes yes perfect yeah they love the username that's it so it's funny uh so so it's easier than the api uh context api it's less uh less code than the you know what dude i i have to admit with you like i i hadn't played with it before they done all this upgrade stuff like with the toolkit um it's actually really good like i said i i would actually recommend that we all try and and do this now because you saw and and i will actually i will i will actually say that as in they've upgraded it so well that this is awesome like because in like as if you guys can learn this this is actually really powerful now bear in mind there are things like map state to props map props dispatch you're going to see because in production this is the new this is very new this way yeah now the way that you're gonna see it in in sort of typical environments may not look like this this is using like hooks and it's using this hook and it's using a special kind of hook the way you would do it is um i think i think what i might do is is is next time show you guys a sort of redux project like an old-school way of doing the redux way um because that's what you might get into over in a project right i'm just gonna go ahead yeah that would really help yeah that's right you know like some kind of get some kind of big um like a big old school project and we kind of build on it like that so i'm going to go ahead and mute him yep so i'm gonna go ahead and um uh joe i think that's you actually is that yeah i try to mute everyone wait okay no sorry sorry joe it's not you i accidentally yeah yeah go for it yeah so basically when i want to store the values in the session like how can we communicate between context api or redux with a session so that i don't need to store every time in the cookie basically so that uh for this like there is no communication between cookie and map even the context api or the reducer or three depths so so cookies and so opposite you're talking about persistence so you basically mean when i write yeah so when i refresh the page like how do we keep track of what the count was on basically or something like that right um there's loads of ways you can do it uh there's like redux offline so there's something called redox offline there's redux persist you see like build offline first apps there's probably a really new one redux persist persist reducer you see like this but i would i'd keep looking around and maybe find the most modern one i guess um but you could do it you could do it loads of ways i mean i don't feel like i don't think it's a good idea to jump too much into this right now but um let's just try to use persist let's see if we can use it like relaxing any reference would be okay like i'm doing this for a project basically okay so what you want to do is it's called hydration okay so it's like what you're trying to do is called um basically what what we refer to it as like so i'd recommend looking at this kind of thing like as in like redux persist or redux offline right okay and what it will do is they're built in such a way that they will use either local storage or they'll use like a cookie or something like that so and then what you do is basically you see like we've got the provider here and then you have another thing which basically wraps so the root component would be your app but then here persist gate would be something that like basically goes ahead and you know it will provide like the persistence layer so provide the local storage layer um but let's click on basic usage and let's see how the systole um but long story short you're gonna need either one of these it'll be redux persist or read that's offline and the whole point is that uh what's gonna happen is when your app loads up again so imagine like if i refresh now it goes to zero so let's say i do this and i implement something like redux per sister redux offline then what happens is when i refresh the app it does something called hydration so it rehydrates which means imagine the app starts blank and then it rehydrates and it pushes the values that it had in local store back into the app which means that it basically goes back to 5. okay so there is some time game between them um what happens super quick like you won't see it um okay but you mean you could do that i think i have a question based on that like last night i developed uh the facebook app but whenever i refresh the page you know like the person who is logged in immediately so it will bring me back to the login page for me to log in again is it because of this persistent stuff yeah so the facebook the facebook app used um google login google yeah so two things to consider if you use the email and password implementation which we've done with the amazon build i think yeah if you do that then it actually firebase have built it under the hood so it will persist by default so as soon as you go back on it'll check if they're logged in it will grab the user and they'll basically throw you back in to where you're at but with the google one uh i would i would recommend that you research on uh because i i mean i didn't implement it for that one but i think it'll be google firebase uh user god's sake oh sorry that was someone again google user um authentication so firebase google user authentication persistence is what you're looking for and basically what you can do see authenticating state persistence right so again that's a skill guys to literally learning how to google the right things just practicing that skill is going to help you like dial in that sort of you know that ability to sort of find what you're searching for um so here you can basically look you can store it in local you can store it in session or you can sort in none now here this is awesome because what you can do is you can actually go ahead new sign will be persisted with session so remember set persistence okay so what you might need to do is before you actually go ahead and do that um you need to basically go ahead and call the firebase.org set persistence method so this one here and then basically that will go ahead and persist the login session um on your computer so here we should have here's well here's what you wanted to do yeah so this is exactly what you need to do so basically you most likely in your code have at some point here new firebase auth you basically there is a snippet of code i remember i remember exactly in where it says sign up with pop-up sign up with redirect provider right that bit all you need to do is before you um call that make sure you do the auth dot set persistence and then you do this but change dot none change it from dot none to um dot session so this one yeah so what i'm going to do is i'm going to drop this for you guys in the zoom chat and you guys can actually go ahead and read that but go ahead and play that out because uh give that a try and uh you can see that suraj said sunny how did you gain such enormous knowledge through a lot of practice or enormous reading um honestly it's a mix it's a mix of throwing yourself in deep end it's a mix of just uh when you're in in production environment you get a lot of practice also guys if you're watching this on youtube please smash the thumbs up if you're enjoying it uh we really appreciate that um but yeah what i would say is if you if you like in production environments just by being around other developers who have all sorts of like experience and kind of like have that knowledge just literally act like a sponge right so which means that like literally if you're never go into coding with the mindset of i know this even today i went in with the mindset of i don't remember how to code redux so i'm going to keep an open mind i'm going to keep myself like quite flexible to it but we're going to go ahead and um we're gonna go ahead and start with a fresh mindset so muhammad says how can we inject redux module to our projects if you go to the redux so literally just type in redux um and go to getting started with redux you said you wanted to post you know the link to the persistent stuff google firebase on oh i did i did do it i'll put it here again one sec um so just point up there we yeah go i had a question yeah like suppose in an application where you know uh we route from one page to other page so suppose i am reporting one page and i have used grid data like some about 1500 records yep and then if i click on a particular like row and then it will redirect me to that particular build round report yeah and then i have a back button which will take me back to all that records yeah so will redux be beneficial over there like i don't want to pull all that records again from the database like it's just a back routing from one page to other so okay so in that case okay you need to be careful of two things now um i would say um so one thing would be right so one thing you you you'll have a problem with possible stale data so you need to think about that from architecture's perspective you like you might have put stale there so imagine you poured in a bunch of um uh ab abduces did sunny possibly on slack over here so this is the link guys i'm gonna post it in oh everyone in the waiting room sorry sorry sorry sorry uh i don't know everyone in meeting okay oh man i hate this there we go it's sunny there's no one waiting because there's no no no no no no no no no no no no no no i meant in the chat yeah and that in the zoom did some weird update i just dropped the uh the link like five times in the chat so sorry guys you can go ahead and check it out sorry about that that's why i didn't make i thought i'd sent it before um just to add to what tushar said is to show referring to like a kpi scenario on a dashboard where you can click and you can go to the show are you referring to that something yeah no it's like a master suppose i'm having distributors like all distributors for one country and then i'm clicking on distributor and it will take me to new page and it will show all clients of that distributor okay there is a back button so if i click on back it will take me back to all distributors so yeah i don't want to yeah i don't want to reload that data again from database so it's like yeah so what i would recommend is have some kind of you could use something called redux offline um redux offline the benefit of that would be once you pull in some information for example into the app it would basically like kind of like cache it okay so it will kind of store it into it into your local sort of uh local storage but you you would have to remember whenever you do that you have to think about the architecture you have to think about that right is it going to be stale data like are the the sort of um you just said there's manufacturers or something right like is it important that that that's always up to date right if it is then you need to check right is the cash version less than five like five um five minutes old or is it like less than five fifteen minutes old if and then it would be only just for that phase you know like if if he's on that report like the url of if he is going to that report and if that's an internal drill down like from that distributor yeah but if he's going back to other menu rolls and if he comes back he needs to reload it again yeah so you can do that don't you don't get me wrong you can do it but remember what you what what seems like a very natural experience to us as a human is is on the computer side you have to think of it in terms of an architecture it's like building a house you have to kind of build things with the support underneath it so that it supports that functionality from the get-go or you have to implement something like redux offline so it allows you to to enhance the app so it has that functionality otherwise you will run into a problem where you have some kind of logical gap where you're like uh how that why is it refreshing here and not refreshing here and what can happen and i'm just kind of giving you my advice on this based on experience is you can kind of build very nasty sort of solutions right various on tricky nasty solutions which which work but then are a nightmare to to touch like and you don't want to get into that position so um make sure you're in a position where you you think about those things from the get-go but honestly dude what i would say is um is is just making sure that you have uh um make sure you just have have an open mind and just practice it honestly just practice it and uh if you don't get it right the first time don't worry about it just keep doing it until you get it right every time honestly that i've done so many solutions where if i look back i'm like that was the crappiest solution ever but truth be told like it worked and i learned from it and now i can pretty much go ahead and improve my sort of the next time i do it that's it you know so don't beat yourself up about it but um i just saw some comments now cheyenne says the redux data layer where is it stored is it browser storage you know it's actually sort of uh it's local so remember it's non-persistence um which means that if you're refresh you're still going to lose so you can you would have to implement something like redux offline or redux persist or something like that to go ahead and push it into browser storage um [Music] huda rahman says as my first time in redux i stayed till now trying to understand your nice explanation thank you so much thank you so much for for watching uh troy says sunny is very organic teacher nice experience and skill and open attitude to training others that's going good thank you very much dude uh awani says huge respect for sunny thank you so much thank you soon uh one at a time guys okay uh sony uh i just started a question so uh you mentioned about uh two sort of states state user and payload.user right so these are like uh the initial and the last state if in case you wanted to uh get states that are in between like version states that you can sort of use it as a fetch dot command sometimes you can it doesn't substitute postmen and things that you can use within the browser to analyze data you remove stale data things like that um do you mind repeating again because i kind of lost a bit halfway so just repeat that one more time yeah so what i was saying is uh does uh redux uh solve the issue with sometimes uh analyzing data taking up uh data's that are stale uh analyzing them just the same purpose as postman what it does is fetching the data analyzing it maybe you can remove it from the state uh so remember this remember try and think of everything individually so firstly postman doesn't do that postman is literally a client that can just make a request you can make a post request to get request it doesn't analyze it just literally can make the request to get the data right um thank you so much patrice um so it only makes the request right now redux is allows you to pretty much go ahead and it allows you to go ahead just just literally store the data in some way right like you literally all you can do is like it just it's a it's a state management sort of a tool right think of it that way so when it comes to analyzing stale data you can have something like a middleware so redux supports something called middleware um you could do that and basically you could check if the data that you're fetching for example the selector this could be like where you enhance the selector you can pretty much go ahead and enhance the selector so that you can say if i grab the user and the user's timestamp is like more than five minutes ago go ahead and fetch the user i mean this little example you know um that's kind of a sort of quick example of that uh cheyenne says sonny can you give a little bit more info about redux saga so redux saga is something that we use when um react target is actually something we use whenever that's all right dude welcome so redux software is something that we use when uh we want to do anything asynchronous so i mentioned asynchronous stuff before is pretty much a case of when you make a request right and it's got like a delay because you're pretty much going across the network and then you're coming back right so it's kind of a little bit of a delay redux saga is a very popular library in redux to do that um there's also a redux thunk so two options i would recommend sort of this consider this kind of homework to go away have a look at redux stunk and redux saga they're two things which are going to allow you to handle asynchronous actions and side effects so side effects are basically put this way imagine i sent i went ahead and um my target says he uses thunk imagine you went ahead and you pretty much um sent a request to go ahead and fetch some records from google right let's just say you did that for some reason and then let's go ahead and imagine that you um it it came back fine right but they say a side effect of that was that the data failed to load or the network dropped or something like that how does your app account for that right so redux stunk redux saga they all allow you to handle side effects of asynchronous actions so because remember when you're doing an asynchronous action you can sometimes have it can go successful it can fail loads of things can happen because of that network call right asynchronous can also mean if there's a time delay so let's say you want to do uh it takes like five minutes for something to calculate after you click a button that's asynchronous because it's not immediately sync you don't immediately see a synchronized result which is why we call it an asynchronous action anything with the delay think of it as asynchronous so redux think funk and react saga are things to look into for that um just going to take a few questions and then we're going to wrap up today's session um uh sunny yep so could you use like firebase or mongodb with redux like i mean for the counter right here so like whenever even if you do reload the um the amount would be saved like you could retrieve the most recent amount that was yeah so good question uh remember so if you're using something like firestore i wouldn't even say i would maybe just say directly mapped to the database because firestore makes it so easy to go ahead and do that and they account for offline which means that um if you was to go offline change some stuff and then you got an internet connection again it goes ahead and syncs everything so i wouldn't even bother enhancing it but to answer your question i'm going to quickly share my screen and show you that there are libraries um like this you can do redux firebase uh and here you can see react redux firebase react bindings for firebase so there's loads of libraries uh this one has a decent number of stars um so here you can pretty much see how you can use it you can see like how they've implemented it and basically what this will do is you see like the where we had the reducer stuff right you pretty much have a firebase reducer and then what that does is um you have this hook here inside of your functional component so imagine this is our component say cons firebase equals uh use firebase and then here you can pretty much push things into like the firebase collection so to do and and you can do things like that now am i a fan of this sometimes i've used it but i found it can also make things kind of over complicated um so i've kind of like could just ask we just we could just add the firebase object to the redux state and it will still work yes and you could do it that way um but there's no reason to do that i mean no no i i wouldn't say there's no reason um because that it could integrate nicely it i mean just be the setup is difficult yes and i'm against it because i i see the simplicity of just doing it directly but they do give you things like is loaded is empty uh which help you out because for example is loaded is going to help you uh have like a piece of state not a piece of state but it's going to allow you to basically go ahead and um have like some kind of loading right so like imagine like if it takes a second for that asynchronous action you can have a little spinner loading or something like that right you could do that um which is kind of cool um but there's uh there's many different things you can use like even here react reader oh this is pretty cool so this is actually um an official looking react redux firebase um look you see this this is pretty cool so i recommend maybe go have a check of this firestore um i'll drop this in the chat now guys uh check this out that's so sony uh there you go i just dropped it in the chat yep yeah what was that dude yeah uh sony so isn't this just like uh uh is like a mini uh query for uh for uh for those for the state that is currently running is it isn't this like uh what was that like a query language like you can uh literally go through the data and uh no so so guys try not to like honestly like what we tend to do naturally as developers thank you so much pedro um may and i think we can definitely advance more in redux next time maybe like some kind of example of like an old school redux app and that kind of thing would be cool um yeah so try to not overlap principle so in coding to be a good developer you get get really good at kind of keeping things simple right because like what we tend to do is we naturally really over complicate and and and all that naturally be like i've heard of this principle is this part of this and is this part of this and is this like is this where we like do you like data mining and things like that you know everyone kind of like overlaps principles and stuff like keep it so simple and just remember all redux is doing is managing state within an app that's it that's literally all it does right it can then you kind of plug in things on top like redux offline redux persist redux saga all that sort of stuff it all just plugs in on top right building and functionalities on top of it yeah yeah thanks no worries dude i had a question yeah sunny yeah i had a question okay uh in context api who has we have created separate uh state provider file and reducer files for login basket something like that is that creating separate data layers or we are using in them in the same data layer uh say that again sorry instead in context shape way we have created files state provider for different purposes for login for baskets and things like that is that creating different data layers are using in the same data layer um so in this case what i was doing was i created two slices of state one i created for uh don't ignore the basket option and that was that's just me demoing something in this case we had let's go to our store here we had a counter slice and a user slice right now imagine if i had a basket inside of my app i would probably create a basket slice and then i'd have a basket reducer to listen and manipulate the the app based on that stuff now um what i would say is it's re like for example i would have a basket and a basket producer and then i would only use firebase or when at the point in which i actually processed the order right so like when i actually push the order into the the user sort of like um and i actually sort of handled the payment and stuff then i would go ahead and use firebase and say like hey like or if you really want to get your app super like sort of souped up i guess you're gonna have like um their their basket in firebase so it's always kind of there so i guess if they come back to the website they've still got their basket you can do that um but the main thing is right is try and keep your yours your store sliced up into slices which which are which makes sense right like have a a basket slice for the purple and that's the only purpose of that basket size to be to basically manipulate the basket which means that you actually reduce the complexity a massive amount by doing that right um also i see those questions yeah same data sorry slice in the same data yeah so remember you you have like uh you have this global store and it's sliced up into different slices you have like the user the counter the basket right that sort of stuff uh that's that's all you need to sort of think of it from uh also guys please meet your mics if you're not talking yep thanks honey yeah always dude uh i'm gonna take one more question and then we're gonna before you say that we should get familiar with the unfamiliar i'm just getting familiar with the state and props who you propose that we get familiar with the unfamiliar yeah so uh good question and i think a lot of people would benefit from this answer so my answer to this would be uh remember everyone is always going to be at different points right they're always going to be like someone else can be more ahead of others and things like that now what i would say is if you are like new to react if you're new to sort of like and you're not completely familiar with it focus on the fundamentals focus on that com building your first component focus on getting that thing to load on the screen but then move on to state and props state and props are going to be the most important fundamentals if you don't know state and props everything else is not going to make sense okay um uh everything is oh is oh you are you pinned to the screen dude oh all right sorry oh my god has it been pinned the entire time yeah yeah oh my god on the chat am i teaching yeah yeah sorry guys don was like oh damn did sonny pin me now yeah sorry about that guys i honestly on my screen i don't see that if that ever happens yeah so sonny if you if you had to rebuild amazon clone can we do it with the redux the way you demonstrate it for sure yeah in fact when i create um the module i'm obviously i'm i'm working like so i'm i'm working on the react basics modules now for you guys so that will be dropping inside the course that i'll help all of you guys out from learning the fundamentals and stuff like that really trying hard to work on that and film it and do everything to get that out to you guys um and then i'm going to basically be enhancing things like um the the the builds that we have so imagine we had the who we have the hulu build we we have [Laughter] guys and then i'm going to be bringing like things like the hulu clone but like upgraded version with redox with other functionalities and stuff so that way you guys can take it to that next level practice it with stuff like that also thank you shrikha for the kind words um yeah no problem so suddenly when we approach uh like any project that involves redux so you think like when someone like you know people are involved in developing like the developers they do like a the whole wireframe to the in the individual components level how they will interact and then they kind of divvy it out is that is that the way like a you know major project would go about in implementation-wise so it depends like put it this way when i was in a like a start-up company um we would you basically have the way it works in a professional environment is you usually have someone called a product owner right or like a product manager or a product owner yeah stakeholder right basically yeah so so try and think of it as stakeholder but product owner is just literally like a manager right like it's literally like you have scrum teams typically if you're doing like an agile sort of working environment right so you have like a team of like i don't know maybe four of you developers you have like a product owner who sits on top of it that kind of manages and then you have like a designer maybe in that group now the way it works is the product owner pretty much goes ahead and goes to like the stakeholders and stuff like that and says like hey guys what what features do we want on the app and then the stakeholders are gonna be like all right everyone's asking for um the chat functionality to be finally be built out and everyone's asking for google login right so between the four developers then you basically in a two-week sprint you would basically the product owner would say all right out let's here's the user stories like here the users want to be able to log in with google users want to be able to have chat functionality then you would basically go ahead and your designer would provide design maybe they'll provide like some designs for that um and then basically there's no set way right so put it this way whenever i had to do like a login thing if i got stuck and i was kind of like okay i have a way that i think might work but i'm going to need some help on understanding the way things are currently built because remember you're going into an environment which has already been built in most cases right so what i would what i would say on that front is in most cases i found myself kind of sitting with a bunch of other developers on a whiteboard and kind of just saying like hey guys do you mind just running me through like the current architecture and then pretty much i will i have a solution that i'm going to propose to you guys and we kind of like literally just draw it out and he's like okay so currently we have three slices of state which all basically are responsible for this and okay maybe we could use this part in this part as our data for this functionality and um and then and you see like you kind of just literally you just literally just kind of brainstorm it so you're saying basically try and reuse whatever is there first rather than reinventing the wheel it's not yeah honestly it'll be it'll be a case of like it's not even reusing it's you're gonna your solution in most cases won't be like this where you have a fresh canvas right it's going to be like you're going to have to integrate a solution into an existing software right sort of like a retrofit or something yeah it's like you're a retrofit and in most cases like a good developer when when i really sort of like shine started to shine in my sort of like like career early on is when i kind of went from junior upward really quick is when i sort of like i took i i wasn't just kind of saying like okay this is what we need um to change so this is basically what i'm gonna i'm only gonna do my job and i'm gonna leave right i would basically start implementing things like okay i'm gonna i'm gonna implement this feature and also i touched four files each of those files were class-based components i just changed all of them to functional components and also we were doing some bad practices here here and here and i know about these practices because i follow this newsletter and this is like the most up-to-date standards so i think we should be using this uh whilst i was at i may be like i changed a few bits and bobs here and then they're like holy like what the like and then when you ask for a perry rise at that point they don't really care they're just like okay i mean we're not going to lose you like so do you see what i mean like over deliver right over deliver and then when it comes to like asking about salary and that's not then there's kind of like we don't want to lose this guy because this oh this girl because it's just literally a case of like you're just going above and beyond and you're just over delivering yeah and don't ever feel like there's no silly questions there's no such thing as being like don't be reserved like literally like dive in offer to implement things which you have no idea how to build because you put yourself in a position where you don't know how to build it because i promise you if there's money behind it and you're getting paid you're going to find out how to build it you're going to pull on the resources that stress is a good stress it's a scary place but it's the reason why i'm the developer i am today because i literally just threw myself head first into the deep end to the point where i had no idea how to build half the stuff and then you just you literally like i was literally going to other offices in the building where i knew the other startup companies were and i was like hey have you worked on um react native and then and then let me go ahead and yeah i was literally walking into other offices in the building and i would literally ask them like hey is anyone in here coding in react native and i would literally find someone and then would pretty much go ahead and and you know uh break it down and they'll be like yeah actually that's the reason why you're having that problem and you it forces you to really go outside your comfort zone to solve a problem um so that's my advice on that front yeah cool keep our open mindset as well guys yeah and when joe is talking about uh the distribution of a work when when you are working in a uh in a team for example if you are starting a fresh new project then how you approach how you divide your work into the team and uh i'm talking about the coding perspective so that nobody should be able to step on others work so okay so you use so the main things is is just the main way to sort of overcome that is learn github learn how to make like pull requests and learn how to sort of get involved in that side of things uh nars is actually pretty good i mean he organized some kind of like uh coding competition where everyone was pushing code and teams uh that was a cool thing we can do more of that if that helps out but what i would say is github is going to be essential in understanding your understanding how teams work together um and also it's going to be thank you so much arsene um it's going to be very very important in terms of you because trust me once you know how to use github you very quickly answer the questions like how do many people work on code together it pretty much goes ahead and and it answers a lot of of those questions right now um you very rarely are you going to be in a position i have been in the position two or three times where we're starting a new product right or i've been in part of a team and they want to start a new app or something in which case like you do have a lot of opinionated battles because developers are heavily opinionated it's like no i want to use this and i want to use that and i had a huge debate with the senior developer when i was junior about why we should use typescript instead of something called flow and i and and you would think that the the senior developer win but i pretty much like yeah we ended up using typescript because i was like no but like this is the reason why we should use it and went back and forth for ages and it was a heavy it actually got really heavy debate between the two of us and then we literally ended up having loads of back and forth but the point is that it doesn't matter like you literally you just overcome those problems and never feel like just because you're a junior you can't say something to a senior developer because in the end of the day like it's it's trust me when i say i've worked with junior developers who have blown my mind in terms of how smart and quick learners they are and things like that so uh never sort of take your like lack of experience as a sort of hit or i can't do that because i haven't really coded in that before just always assume like but always keep an open mind so it's a balance between the two and the other question is because uh when i used to work in a in a financial client when i worked with the financial client they don't allow to use a github so what is your recommendation to use they didn't they don't allow no they don't want even to go to the firebase or any uh external websites to grab anything they have their own uh databases they have their own uh local environment so what tool yeah so could it be useful they probably i mean so they had no form of source control yes not like a github github is we used uh you know we can use it in other companies but when you're working for a financial client they don't allow to use any external resources because of the security dude i'd say that company [Laughter] there is a github enterprise edition right i mean you can i know financial clients that like the insurance companies they still use github but it's it's more within their dmz kind of you know it's an enterprise version where only they can only people within the organization can interact not uh like any romney can hide it from outside yeah there is a lab lab is for internal use where it's not external yeah and to be honest like i know i made a joke but the truth is that there's always a way of doing it securely even github get up remember guys github is literally where probably really yes yeah just making it clear guys yeah make it private is it literally a billion dollar companies hosts their code like like no joke billion dollar companies host their code on github get labs like if if if security was a concern um then then they would have been bankrupt by now yeah then everyone like everyone all of these billion dollar companies would be hacked by now i mean they probably most of them are but the truth is like is in the it's the stat the best you're going to get is on is on that kind of thing but if they do have i was not allowed to use even a gmail or any external any application outside the scope of the company i mean i hope you're still not with the client uh yes i mean you do get you do get cases where people are extreme you do you do definitely get cases where people are very extreme with security i mean in the end of the day if you're getting paid and and it's and that's what they want uh i mean i would go with it i mean but depend if if you're working somewhere for a long period of time and they're not using any source control i don't think it's a good place that you're gonna i mean the chances are they're probably not following other standards or other practices were they literally like copying and pasting code or like did they have like a usb that i was i would imagine too how the hell do you maintain source yeah because the reason why github is really good and so think of it this way because github is essentially a source controller which means that say for example every single person on here had a feature that they wanted to work on right on an app that we're all going to build together yeah now what can happen is we can all make like a branch and we can all work on a separate branch and then we could all come together and then we will merge it yeah and then we can like merge it together and things like that now the bit where github really shines is when you have like say for example me and priyanchu both coded the header right and we were like oh like i didn't realize preachy i did that icon i added this one you can do that i'm coding with you yeah and then exactly you have something called a like a clash right or like a collision or something like that and yeah and a conflict is called and then github and other sort of clients allow you to do something called conflict resolution where it shows me it shows both co once i did it shows both pieces of code and you can pretty much very very nicely choose which lines to keep which eyes to remove and then you resolve the conflict emerge right so that's good yeah so that's how you do it so okay uh what were you going to ask brian no i just i was just going to tell one thing that there's an amazing video by uh nars on the live stream so yeah yeah on that resolving conflicts in php storm you have a way to resolve conflicts from the editor do you have the same in visual studio code like can you see the branches yeah it's a beautiful way of doing it yeah you can really do it nicely and uh and in fact what we'll do one day is i'll purposely kind of set up a scenario where we can sort of have a collision and we can do it together and we can kind of overcome it use i think a whole session on github might be pretty cool um yeah yeah he has yeah already has one he put okay he's done a video it's in the live calls from nas about get what is it oh dog yeah if you guys if you guys don't mind dropping the slides yeah if you guys don't mind drop that in the slack channel and let everyone know that will help everyone out yeah awesome doing that right now nice sony i had one question regarding uh react native okay this will be the last question guys yeah yeah yeah yeah so suppose now uh you know like uh we have an app which is on uh older version of react native and we had used some libraries and now uh as due to ios 14 our it's been released so when we code it so many of the libraries has been depreciated so what we should do like look out for some new resource or just stick to the old version or something like that um one second um [Music] just give me two sorry dude give me just give me one second yeah um and then i will get back to you i just need a link quickly um okay uh do you mind just sorry just repeat that one more time so react native yeah yeah we have used some uh libraries for some uh gesture controls okay so now for ios 14 now uh when we compile it uh it gives us like these libraries has been depreciated like they are not been taken forward like they have not been updated yeah so most probably it gives some errors or some you know users while uh publishing it yeah so what we should do we should look for a replacement or stick to the old version so this is something which kind of does become a bit of a tricky situation so when you whenever you have any kind of um whenever you're handling upgrades right upgrades can cause brakes they can cause things like they can break things they can kind of mess things up um you need to be careful what you need to look for is a minor upgrade versus a major upgrade now a major upgrade is like for example say we had version 2.3.5 of react right now if it went from 2.3.5 to 2.3.6 it doesn't really matter right that's that's not considered a breaking change right that's considered a minor change i think even if it went from 2.3 to 2.4 you can actually get away with a lot right but the minute you go to a major change right so you have things like you have a you have um a major a minor and then you have like a smaller one i can't remember what it's called but you have like a different apache that's it yeah nice thank you anand yeah so you have major minor patch right if it's a patch really won't affect much if it's a minor chances i won't affect much if it's a major it has breaking changes right so a major if you go from version three to version four then you you have to like i would recommend you read the documentation you would thoroughly test your app you that's this is where automation testing comes in because automation testing if you stay up properly so usually you have a qa team right here's a here's a top tip guys if you can actually go ahead and get really good at automation you can save a company so much money on qa right because you can build automations which basically are much quicker than qa they run every single time code is pushed now imagine if you can think of it this way if you can go ahead and save a company um let's just say a qa of two more like two employees right and let's say they were paying them employees like 30k or 25k or something each right now if you ask for a bonus or like a boost in your your salary of 15k because now you're handling all the automations or 20k they're they're going to be like whoa we we actually saved money on two employees and he's actually doing a better job at some point like uh and and he's covering all the stuff and like i'm not saying it's that easy but the point is that you can do that like there's power to do that if you get good at that but the main thing to look at is yeah the major changes so you always want to read the documentation the major changes also whenever you do dependency upgrades be careful because things can break and i've been in situations where it's you have to figure out what brook and it is a nightmare i'm not gonna lie to you is it can become really like a headache and i've had i've been in situations where i've spent like an entire week trying to debug something because something got upgraded and then it can get very messy yeah thank you awani uh last question awani because you message i think is somebody messaging a chat so that'll be the last one and then we're we're going to wrap up there guys um firebase i mean you said like firebase this actually make things easy for us and we can use it for like hosting our application so uh what if like uh the client we are working for doesn't use firebase or you like he or she the client has uh some his own hosting uh thing so but what's the solution for that like i wish so um very good question and the truth is um wow thank you firstly thank you so much andre he says this lesson alone was worth more than three years of computer science college thank you so much dude i loved it thank you thank you so much dude i really appreciate that um yeah so i wanted to answer your question um also whose mic is that um i just want onion joe comes in you're coming in yeah yeah there we go joanie so basically um yeah the way you want what you want to do is most in most cases you're going to a company they probably won't have firebase that's that's the reality of it they're going to have either azure or like um some kind of aws or like some kind of like cloud infrastructure or something like some implementation because it saves their money in a big scale so that's you have to be prepared to be um flexible around that stuff right now what i would say is it depends on what position you're going in for so you can uh you could literally be a um [Music] you could be a front-end developer so you could pretty much be up front and you don't have to worry about the back-end as much the back-end team will pretty much go ahead and deliver their sort of the response and that sort of stuff to you and you pretty much just render it on the front full stack developer is a skill i would recommend you do pick up if possible because it is going to help you in the long run um especially if you want to kind of branch off and do your own thing at some point or you want to freelance or do something it kind of gives you the whole full focused uh sort of skill set to go ahead and focus on that now um you uh i think i've went off track but what was the actual question it was like how do we how do we overcome that was it yeah if you are not using fire fire waste then uh what's the solution i mean i my case is i need to make one website it's a social media website for one ngo yeah and it's like um so like they don't they won't be using firebase at all yeah so so all this stuff kind of comes under devops which means that like if they've implemented it with like azure or they've done aws then you you're gonna have to figure out how you do that and there's gonna be people on the team that can help you or if you you do have to do it then you're gonna have to like kind of learn the new stuff to do it but i reckon the reason why we teach firebase is because if you're doing your if for personal projects i always go with firebase i literally it's the easiest thing if i have a freelancing project firebase boom done like um but if the reality is in the commercial environment you probably won't be getting that you definitely want yeah that freelancing project i mean so i can suggest them to use firebase is it like will it i mean thing is like it's it's in india and like they can't afford that much money i mean uh i'm like i'm doing volunteering there and it's like the minimum amount they can they can be doing like they will be able to do it did you say don't use firebase was that i think she said that it's it's for a non-government organization and i think they're they have budget restrictions yes so they they can't afford so i'm guessing it would be a good idea to use firebase because that's it's free yeah to a certain point yeah yeah i would i would actually say use firebase yeah completely but if the company has their own databases then she has to go through a connectivity with the database and push the data there yes even if they have authentication even if they have their own database i guess they have the documentation to how to use it like they want to have it you're gonna have either so i would so you're either gonna have a developer who's gonna be able to help you out um if you don't and they just have a database then if it's a sql database you're gonna have to pick up some sql and pretty much learn how to like kind of do that it will be like uh i mean it's like a completely new thing just like instagram and all so the for the idea is like they want like all the ng ngo to talk with each other like they want one uh social media website for all the ngo uh working around all over the india uh and they're basically they're not getting any fun from government so it's like new thing for them for them and they they want like through that website they want to earn some money so they don't have any database nothing yet i would say go with firebase yeah the reason being is because and if they kind of question you on it i would say look if if the idea hasn't been tested and this kind of comes from a business perspective as well because uh the lesson is like good software com i worked in a lot of startups and the ones that succeed are the ones that do iterate like iterative builds which means that like they do small incremental builds which means that like if they have a new product like you're saying they want to get all the ngos talking to each other right build the simplest product to test the idea right and i would actually even pitch that across to them and say look firebase is going to allow us to power the entire thing have real-time functionality we barely have to do much to get the entire chat functionality working if they want to send pictures across to each other firebase storage will support it we can host the app we can do rollbacks we can deploy it everything is supported by firebase out of the box now even language support is is supported out of the box with the ex firebase extensions it will literally translate it to a bunch of different um languages in a like literally you just click a button and it does it all um so i would recommend pitching that across um it was good for proof of concept right yeah literally just show them proof and my best advice here would be like yeah like just like joe said if they kind of say to you like hey but why should we do that i would literally go and build it and be like i'll build a very simple clone of it and be like look this is it like it didn't take me long to do it and then uh like on instagram you you have uploaded in like youtube on youtube yeah there is one on instagram yeah yeah so we actually climbed instagram already uh so you can pretty much check that and also facebook we did um it's crazy now that's always the first that i did yeah yeah i put it with you but i did not finish it i want to see you finish that dude that's it i will uh you're saying like you are saying like uh fi we can use firebase right like but firebase doesn't have like uh will it have like limitations on it memory limitations like so let's say ngo yeah so i mean remember that everything will have a limitation on right like is in nothing is free like i said firebase is actually considerably free for a lot of it so you get a huge amount of stuff for free um but remember guys like all this stuff like like rather like honestly i'm not this is not like a dig to questions or anything but like whenever it comes to a pricing question or something like that just type in firebase pricing or like literally aws pricing and do a comparison of the two now firebase is literally free for so much like it's in like i've never hit a pricing plan on firebase uh until it's completely needed but um i would say that that you can just pretty much yeah my my opinion would be proof of concept is more important than a few different a bit of differences in pounds here and there right yeah with that for ngo yeah firebases uh you have to hardly pay anything for ngos i believe yeah just inquire about that exactly so i would suggest avani to keep in front like in the uh to client that there will be a price for specific data yeah but remember like any database is going to cost nothing is free right like it's more about can you prove that it's valuable remember and it was what we talked about on coaching calls and everything before least expensive i mean making it when we compare like but guys remember like what what i'm trying to say here is that like that you need to remember in terms of like we're considering things like yes it could be like when you hit a million messages it's probably going to be a couple of pounds like which is still pennies like is it i i know it's like it may sound like a lot but like it's nothing compared to like yeah and yes aws you could probably get a bigger scale but the implementation is going to be harder the developer cost will actually be huge compared to the if you just quickly build the thing on firebase like so that's why if i have even if you are even reaching a million messages you might already have the budget to do that i guess like yeah if yeah of course then if they're reaching there then of course yeah exactly so you would have proof you would approve the concept yeah guys i'm gonna wrap up one question i'm gonna i'm gonna wrap up here but but uh okay okay yeah just purely because uh otherwise it's gonna keep on going so it's apprehensive yeah just send me a message and uh i can answer that when i get a chance but i hope you guys found it useful today it was amazing sunday it was so almost going down i learned so much awesome like i hope you guys enjoyed that and uh yeah i think i over ended it i didn't think about the reduction what was that your guys are doing very very hard work to provide the content in the form of youtube and coaching calls i think this course is more than a money when compared to hard work money is this course is priceless thank you so much yes there is no doubt about it yeah there is no doubt about it i want to sing for you oh now he's gonna be singing thank you so much guys uh no i really really appreciate that and uh even my friend just came in the youtube chat jay he does he just had his birthday lol and uh thank you so much guys for for turning up and showing up as always and uh for everyone on youtube if you enjoyed it smash the thumbs up button um and yeah as always guys i'll see you next week and um keep on crushing and make sure you all give the rea a redux template a try right so create react app dash dash template redux and yeah and an awesome session and i will see you all next week

Channel: Clever Programmer

Views: 62,396

Rating: 4.928072 out of 5

Keywords:

Id: 3Ct6zuHYDtY

Length: 202min 12sec (12132 seconds)

Published: Tue Sep 29 2020