Reducer, Store, ACTION!
Tags: react, redux, programming, codenewbie
Published: 2021-06-26 03:35:16

## 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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8cfaz4nkae6zbt2z3g21.png)

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. 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qon656oc9w8swtn8d1ax.png)

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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wpoj4pbx0rux6wckr4v9.png)

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.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05be6aavq5m5axadpgw4.png)


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?

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4n3zo1e8xxbr15hmi6mx.png)


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