React is an amazing Javascript library that can make your web application sleek, efficient, and dynamic. It allows modern applications and websites to have different components rendered at once, each with their own information flow working independently of each other. From a developer’s point of view, React is rendering those different components, and those components can each associate with some sort of state management. It is important that React components be able to change state in some way, because that is how re-renders are triggered, therefore making applications dynamic and responsive.
A problem you may run into, however, is when your app grows in size and complexity. Bigger apps require more components and more data flow. It can be hard to keep track of where states should be kept and which child component is changing which state. This is where Redux comes into play!
I will be using Flatiron School’s Westworld Command Center as an example of Redux saving you from a headache of dealing with state management and prop drilling.
Clicking on any of the characters will render the Host Info component for that character at the bottom right. Here, I clicked Musashi which gives me the info for him such as his activity status and current location. It seems simple enough for the user, right? You click any character card and their details will render there.
This is the component tree for the Westworld web application. App is where the state for our Host Info component is stored. From App, the callback function to handle updating the Host Info state is passed down as a prop to 4 children components (AKA prop drilling). Eventually, clicking a Host component will invoke the callback function and the Host Info state is updated, triggering a re-render of the Host Info component and subsequent parent components. This seems like a lot of repetitive coding, right? And this is only for one click event out of the whole app! Rather than copy-pasting the same callback function into each component, you can use Redux to maintain a single source for your state. Any component in your app can then “hook” into the state without the need for prop drilling.
Here, the Index (the highest level component) is importing the Store which houses all of the application’s state values. Using the Provider component from Redux to wrap our App component, we give every child component access to the store through the use of the useSelector hook. In our Westworld example, that means the Host component can access state directly and call any logic to change state directly.
Redux is a powerful React library that is NOT always necessary for your application. Within their documentation, the dev team even mentions to only use it if it makes sense for your project or application. For beginners of React (like myself), the Redux documentation and tutorial may seem a little dense, but it is ultimately worth the struggle and will save you the pain of writing repetitive code until you begin to lose your mind.
