React
can be a confusing, yet amazing learning experience for the willing. It's all too easy to fall victim to the interwoven tunnels of passing down state from component to component. But what if I told you there was something that could help shed some light through those code-ful tunnels?
Enter Redux. An open-source JavaScript library created by Dan Abramov and Andrew Clark centered around managing state. But you aren't here for the back story, right? Right. Let's get into the why aspect.
Let's say you're like me. Or, me a month ago. You want to create a new React application to post up some workouts for your bootcamp finale. Pretty simple sounding right? Until you map out the schematics of passing down state 101 times without the Dalmatians. Pretty tedious if you ask me. The way redux saves the day in this scenario is by holding state in one place. That's right, one. In bold so you know that's a game-changer.
To put this into perspective, take a look at how we'd begin this process of introducing redux.
The first thing you're gonna have to think about, is what your future self will be thinking about. Not to get too inception-y, but you'll need to be able to call upon something to get what you want. This will be that something. This is what's called the reducer. Here is where you'll dispatch(keyword) specific tasks & items. So, in this example I'm imagining that I'll be dispatching an action(another keyword) of adding a workout. Take a moment and let that big-brain wonder where we'd go next.
If you guessed back to the future, you'd be right! Now you're in the future and you've got your reducer with no action to dispatch. As you might and should have guessed by now, this item is your action. This establishes a communication line between your reducer and wherever or whatever you wish to call upon your action to dispatch. But what's the point in all of this build up? Where's the climax?
Will the big bad React-patience-snapping-Gauntlet ever be defeated?
Well,
TUNE IN NEXT TI--
Just kidding.
Introducing Store! The one and only, all-encompassing, holy grail of state management! That is, if you can look beyond the distracting left in cursor-highlighting. Nevertheless, you'll see we've called our reducer for a nice family reunion. This is great because now we can use all sorts of goodies such as connect to manipulate wherever we please! To an extent. Let's take a look at two examples in this project.
If you take a look at the top and bottom there, you might be reminiscing of an abandoned Xbox device from long ago. Using Connect, we can directly access stored state without having to pass down from component to component. In this example, we are using mapStateToProps. As the name implies... --On second thought, I don't even think I have to finish the sentence. But I will anyway.-- ...this maps the State to your props which you can then use however you please! What a load off the hunched programming back, am I right?
In this second example, we see a familiar connect being the good sport it is. Instead of mapping the state to our props since it's unneeded here, we set null and use the second argument to call over a reduxified version of one of our actions! Here we're essentially saying "hey redux, do what you do best and send this workout to my action, to send this workout to my reducer, to store this workout in my store."
Thanks, redux.
Well, if that distracting highlighting-cursor didn't scare you away by now, you've made it to the end! Congrats! You may now be a little bit more prepared than you were 5 minutes ago!! But in all seriousness redux can be a life saver depending on the type of programmer you are. I may seem a little bit biased here, but there are tons of different ways to get to your finish line. Redux can be a great tool for a certain path, but passing state along down the rabbit hole may have it's own benefits. Who really knows? My advice: play around and see what works best for you. With all that being said, I hope you enjoyed the read and have yourself a happy rest of your day.
-Nathan
Top comments (0)