State Management with Redux & MobX

Redux Functions Overview

Steve Kinney

Steve Kinney

State Management with Redux & MobX

Check out a free preview of the full State Management with Redux & MobX course

The "Redux Functions Overview" Lesson is part of the full, State Management with Redux & MobX course featured in this preview video. Here's what you'd learn in this lesson:

Steve gives an overview of Redux functions and then gives a demonstration of using the compose function to combine functions together.


Transcript from the "Redux Functions Overview" Lesson

>> Steve Kinney: So the Redux is really small. And we're actually gonna pull it apart in a second here. It really only has about five functions, all right. And three of these are kind of like helpers, right? Compose is very similar to flow or pipe from low dash. It's actually not related to Redux at all.

It's just a helper that you can use for things. combineReducers just lets you take a big object in your state and combine it all together. And bindActionCreators is just another helper function that you can use, right? So there's not a lot to Redux, and we'll actually see it as we play around with it.

So I'm gonna kinda go and we'll do a little bit of live code together. So here we've got, I've just pulled off all these methods off of Redux. So we can kind of see them all here. And these are just some kind of very basic functions, right? And so we're gonna see how each of these work.

We'll start by the easiest one, which is just compose, right? What compose does is it takes some number of functions, right, one or more functions, and it returns a new function that takes a value and shoots it through all of those functions, right? So let's actually see that in action.

I've got three functions in here. We've got makeLouder, which takes the string and makes it all uppercase like you're screaming. repeatThreeTimes, I think that's pretty straightforward. And embolden, which apparently I found this out just by taking a string in the console and seeing what methods were available, will wrap it in bold tags, right?

And so what we wanna do is create a new function that we're gonna call it makeLouder, embold,and repeatThreeTimes, right? And we'll use Redux compose to kind of create that for us. And we'll see that it's not really, truly of the five functions that we need to learn to truly understand Redux, this one doesn't even really count.

But it is super useful, and we'll use it when composing multiple middleware into one middleware and stuff along those lines. So we'll just say const makeLouderAndBoldAndRepeatThreeTimes. It's very clear what this function does, right? And so here, we'll just say compose. And we'll take those three functions, we'll say embolden.

We'll say repeatThreeTimes.
>> Steve Kinney: And we'll say makeLouder. Cool, and we'll grab this function, which I don't feel like retyping cuz every character I type has a chance for a typo. And we'll just console log,
>> Steve Kinney: hello, cool. And so, you can see that it is all capitalized, repeated three times, and wrapped in B tags, which aren't even in HTML5 or semantically correct anymore.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now