A source of much frustration and many bugs in larger React applications and large applications, in general, is keeping track of the internal state of all the different pieces. In this video, see how Redux provides a solution to this dilemma, getting rid of the internal state in favor of one large immutable global state.
- The first react ecosystem tool we going to be looking at here is something called Redux. Now, before I give you the details about what Redux is and how it works, lets take a look at the problem that Redux seems to solve. This should do a good job of answering one of the most common questions that people tend to ask when they learn about Redux, which is, "Well, why should I use that?" So, the question that Redux aims to answer is an extremely common one, and that is, "What's the best way "for us to manage state in our application?" This can often be one of the hardest things to figure out in react applications, since there are so many options each with their own pros and cons. For example, we could take a rather extreme position and have one central state contained by the route component, and then have it pass down pieces of that state to all its children. But this is usually a pretty bad idea. Since once our app reaches any kind of size, we'll have to deal with an immense amount of what's called props drilling, And that's when we have to pass props through a component that doesn't actually use them but just passes it onto its children. Now, I've seen apps where there are many levels of props drilling. The root component passes props to a page component. The page component passes these props onto a section component. The section component passes those props into a list component. And finally, that list component passes those same props down to a list item component. Now, not only is this ugly, but it can be very frustrating to troubleshoot since sometimes a developer can inadvertently break this prop chain by mistyping the name of one of the props or something like that, which leaves them wondering why some value in one of the child components is undefined. So it's clear that a single state contained by the root component is probably not the way to go. So, what if we went all the way in the opposite direction and just had each component manage its own state? After all, this would avoid the problem of props drilling, but now we run into another problem. What if components that are far away from each other in the dumb need to share data as they most likely will? For example, what if somewhere down in the component tree we have a button component and we only want that button to be enabled if all the pieces have a form component somewhere else in the component tree are filled out? Well, really our only choice here would be to hoist the state all the way up to whatever parent component those two child components have in common. But this leads to a rather unpleasant situation where you're never quite sure where in the component tree to find the state for a given component. It could literally be in any of its parents depending on the needs of the rest of the other components of the app. So, it's clear that the two choices that we just went through are much less than ideal. But what other options do we really have? Well, a pattern that would seem to solve both the problems we've seen so far; the problem of props drilling and the problem of how to properly share state would be to have what's referred to as a global state. A single centralized state that all components have unrestricted access to. So, there's no props drilling because components can just access whatever data they need directly, and there's no problem sharing states since by default all components share the entire state in this situation. Now, this might sound great in theory, but in practice it can be a nightmare. And here's why. There are no rules for how to actually interact with or access the state. So, what you end up with and all, but the most disciplined code bases is an application filled with these transient hard to recreate bugs that occur because of inconsistencies in the state. Just trust me here. An unrestricted global state is generally not something you want. So then, with the exception of the lack of rules and the subsequent chaos when using a global state, having a global state does solve the other two problems we mentioned. Sharing state and excessive props drilling. So, what if we were to take this idea of global state and solve its main problem by adding some strict rules and organization to it? Well, in fact, that's exactly what Redux aims to do. And in a minute we're going to take a look at just how it does this.
- Building more maintainable and robust React applications
- Installing React and other tools
- Adding Redux
- Dealing with side effects
- Libraries for dealing with side effects
- Styling React apps more effectively with styled-components
- Using React hooks
- React fragments
- Testing Redux, Redux-Thunk, Reselect, and styled-components