Redux Tutorial #1 - React js tutorial - How Redux Works

Key Takeaways

all right let's learn Redux Redux is great because it changes the flux framework and provides some ways that really help you avoid a lot of complicated bugs that can end up in a flux like application at first this seems really strange because it does a few things very very differently um and they don't seem to be advantages at first but I promise if you have more of a complex application um it's going to be worth the time it takes to set up Redux at first so kind of if you're starting with react and you're just building a small component just use react keep all your data in a state on your maybe layout level component if you're going to be building more of an application use flux flux sets up very quickly and it's really stable in a lot of ways when you start getting into complicated data scenarios complicated chains of events that's when you need to go to Redux because it's really going to simplify your application and the time it takes to set up Redux which is more than flux it's a little more frustrating I'm going to be honest uh but the time it takes to get Redux set up is really going to pay off over the lifespan of the application so let's kind of look at how Redux does things I'm going to take a few minutes just to talk about it in this video and I promise it's going to be time that you save in the long run because if you understand Redux going in it makes it a lot easier to get up to Pace with it so the biggest thing they change is really over here the reducers and the one store we'll start with the one store so you don't have multiple stores with Redux you have one big store and instead of multiple stores you have multiple properties on that one big JavaScript object so whereas in our prior application we would have a to-do list store we would have a settings store and then we'd have maybe a favorites store um in Redux we would just have one big JavaScript object and that's our store and it would have three properties it would have a to-do list property it would have a settings property and it would have a favorites property so it's kind of multiple stores and it behaves like multiple stores but you keep it all in one giant JavaScript object that we never mutate and we never change we never actually change this object we only create new versions of this object that way we always have a full history way back from the time our first our app booted up in the browser to wherever you end up you have a full history of the exact state of your application every step along the way every change along the way and we'll get into that a little bit more but the key thing is the store is immutable you cannot mutate any value on the store you only ever create a brand new store object um so I'll do a video on immutability in JavaScript CU JavaScript really doesn't do immutability natively um it doesn't do it very well anyway so we'll kind of get into immutability in another video if you don't really know what that is so you've got your one store and then you're going to wrap your entire application your entire react application all their components you're going to wrap them with one provider component so if your normal your base uh component is a layout then your base component will be a provider component in Redux that's really the only big change you make to your components um and that that provider component when the store changes it reenders your whole application every single time no matter how many changes there are always renders the whole application which is we've already established react does very well due to Virtual Dom so you've got your provider component listening to the store and then the only thing that changes in the components area is you've got smart components and dumb components and this is really just good react architecture anyway um but you've got these react you've got these smart components and they're the top level like page level some people call them Pages some people call them containers and put them a containers in a containers folder uh but they're smart components they're aware of your framework they know how to pull a property off of your store say the to-dos list piece of that store um and they will take the to-dos list and they'll inject that array of to-dos into all the child properties so you've got your dumb components like your to-do list component and all it knows is give me a list of to-dos it's an array and I'll spit out a to-do list for you I don't care if you're using Redux if you're using flux if you're using relay you give me a list of to-dos and I'm going to spit out a to-do list for you so your smart components again are the only things that are aware of Redux and then they pass they strip the data off of the store and pass it through um and then these components trigger actions and that's the part that's the most like flux they dispatch actions and those actions can dispatch other actions in our flux example um an asynchronous action might dispatch a fetch data action and then when the data comes in from the from the Ajax call it's going to dispatch a receive data action and it's got a payload of all the data or if that errors out it might dispatch a fetch data error action and the payload would be the error message so actions work a lot like flux no real big change there and the reducers is the other big piece that changes so instead of having multiple stores that all manage their own data you have multiple reducers that all modify the a piece of data off of the store but they modify it in an immutable way they always create new chunk of data to go back on the store and we'll cover that again in the immutable video so instead of having those three stores you have three reducers um one reducer will probably work off the to-do list portion of the store one reducer will work off the setting portion of the store and one reducer will work off of the favorites portion of the store the favorites property and what's cool is is they can all react off the same action let's say you're in the settings view over here and you click on the button that says don't show completed or hide completed because it's a to-do list so then we trigger the hide completed action and then all three reducers probably care about that the settings reducer cares because we need to turn hide completed to true so that way that button will toggle in The View on the next render um and then the to-do list reducer cares because we want to now filter out the visible uh we want to set uh visible to false on all the ones that are completed and then on the the favorites view will probably do the same thing all the ones that are completed are also visible false so then all of those act all at once blah blah blah none of them depend on each other because they're not talking to the same pieces of data they simply all make their changes the Store updates the component rerenders the entire application there's no wait for going on uh because they all act on completely different sets of data so that's kind of Redux in a nutshell that's kind of how Redux Works um and some key benefits that Redux really provides is it's a really simplified data because there's one store uh that's pretty much it all your data comes from this one thing there's really most of these racing conditions you would end up with are out of the picture now every of any kind means a complete application rerender and because of that we also get to do time travel history that store is going to keep a complete list of all the store States all throughout time State one state two we made a change we made a change and if at any point in time you want to roll back your application while you're debugging uh you simply say hey let's render this one right here boom and then the provider component can render the application in the exact state it was in there um you can travel back even further let's render this piece of the store State and as long as you did a good job coding and you never changed your actual object but you always created a new one that's going to work flawlessly that's going to work very well so that's Redux in a nutshell that's going to help you understand it a lot more as we get into the code I'm going to go put together an immutability in JavaScript video for those of you guys who don't know what that is and then we'll get into coding Redux