.map
While I was attending Flatiron School’s immersive bootcamp, one of the most difficult concepts I had to master was the cornerstone of Redux. A function that contained a lot of power that I really didn’t understand, and continue to hone my knowledge in. Here’s a quick, high-level overview of mapStateToProps.
In the process of moving from React’s state system (whether it be class component-based or Hooks-based) it can become difficult to track where everything lives. Since so much modularization is occurring, it can be hard to follow. We know that Redux gives us access to a global “store”. This is where the state lives, and where we’re pulling state objects from. The basic structure looks like this…
Up in that grand ol’ store in the sky lives a piece of state called “selectedSong” which we need access to in this particular component. So the long and short of what we’re asking this function to do is to go to that global state, and have a look around. That piece of state should be living in there, and I wanna use it! We’re specifying the piece of state we need by assigning it a key that we get to choose (song) and the value that lives within “selectedSong”. You’re now free to use that piece of state throughout your component with just a little more setup on your tops and bottoms…
That fancy word, “connect”, makes sure that our component can communicate with that global store. While Redux might not be the best option for smaller applications, it really takes the difficulty curve off of writing more complex programs. Instead of having to pass props up and down and all-around, we can just tap that store on the shoulder and say “gimme”.