Its the question I found myself asking when first being introduced to the concept of Redux working alongside React. The example I was given to see how it works was a very small, very basic app. The app had a text input that you could write whatever you wanted, and it would count how many js and rb appear and display those numbers somewhere else on the page.
The amount of setup it takes to get Redux working was more than the app itself took up. It was one parent element that held three children, so props only had to be passed down one level. It didn't make sense why anyone would go through so much trouble to get Redux working when passing down props to children already works. Then I decided to create a social media app for a final project idea and it clicked.
All Good Things is a social media app that wants to be the positive Twitter. When mapping out my component tree, I realized I needed a lot of the same information in a bunch of different places. For instance, the currently signed in user needed to be accesible in over half of the components, all with different parents. Having to pass that data down, lets say four levels, and then back up four levels in order to make sure all the other components reflect the same changes made the code ugly. Wouldn't it be nice to be able to have that user be saved in once place, and have every component that needed that user subscribe to changes and all be updated when a change is made? Enter Redux.
According to their website, Redux is a predictable state container for Javascript apps. What this means is that Redux holds state that you need throughout your app in one centralized place, which they call a store. As you create components, you may decide that some information available in the store is crucial for your component, so instead of passing that piece of the store down multiple levels, we connect our component to our Redux store. Connect is a part of the react-redux npm package that bridges the gap between our store and our components. Without it, those components are not subscribed to changes in the store and therefore will not reflect those changes.
However just connecting the component to the store does not cause that component to render when the store changes. In order to do that, we need to tell our component and connect which part of the store we are looking for changes in. To accomplish that, connect takes in something called mapStateToProps as it's first argument. mapStateToProps takes in the current Redux store, and returns an object of key-value pairs that reflect the part of the store you want to subscribe to. For example, if we wanted a component to be subscribed to changes in our currently signed in user, we could have something like this.
https://gist.github.com/98104c656c68fc9fc704669bd00073fe
After we have our mapStateToProps function finished, we throw it into our connect function.
https://gist.github.com/78e7423fcee7ce810229b0b2922a3e13
Now, whenever there are changes to our user, our this.props.user will reflect those changes since when props change, our component rerenders. In order to change our Redux store we need to send actions to our reducers. Since this blog is not a Redux tutorial, I suggest reading the Redux documentation I linked above and following some video tutorials.
Without Redux, my project would have been a mass of props being passed down and up multiple levels across multiple parents and children. Although Redux is great for complex apps like a social media app, it isn't required for all Javascript apps. Take the time to map out what components you will need and what information you need available in those components. If you only have one parent with five child components, you are really only passing props up and down one level, so it isn't necessary for Redux to be implemented. The Redux website has links for when you should use Redux and when it isn't necessary, so give those a read as well.