Redux API's & Compose

[00:00:00]
>> With that, let's get into playing around with some of the API of Redux. We're gonna through pretty much each of these. Now, there's a little bit of a lie in here, which is Redux itself has five methods or functions attached to it. But createStore creates a store object that has four more, right?

[00:00:26]
So technically it's got five. I wasn't lying, but if we're being intellectually honest, there might be a grand total of nine. But that is the entire API surface area of Redux. And we're gonna pretty much master the library itself. And then we will kind of tie it in to building some React applications.

[00:00:46]
Cool, all right, so we've got a few in here. We've got createStore, we've got compose, we've got bindActionCreators, we've got applyMiddleware. Let's start out with a good little helper library over here called compose, right? And compose is a function that is not dissimilar to if you've ever seen pipe, or flow, or something along those lines.

[00:01:14]
Compose actually has nothing to do with Redux, per say, it's just attached to the Redux object cuz you might need it for things. What things, well, I gotta keep you, that's a cliffhanger so you tune into the next episode. But basically what compose does is allows you to take a set of functions and create one function that will pass a value through each of them.

[00:01:37]
Let's actually see what that means, let's make some functions together. We can make one here called makeLouder. These will all just take a string, all right? And so say String.to, lowercase string, we'll say makeLouder = string, and then we will string.UpperCase(), all right. Let's give ourselves a little more room here, so we don't need that much, all right.

[00:02:05]
So got makeLouder, we've got a const, let's say repeatThreeTimes. That'll take a string, and it'll do a string. Repeat, I bet you didn't know that was a method on string objects. And then here's another fun one that is not even HTML semantically valid anymore, but we're into it, is embolden.

[00:02:35]
Which will take string, and then we will string.bold, which will wrap it in b tags. All right, just before we look at compose, at all, I wanted to make a function that took the value and effectively made it uppercase, then repeated it three times, and then wrapped it in those bold tags, what would I do?

[00:02:54]
Any guesses?
>> I said map over the functions and apply them one-by-one.
>> Yeah, I can map over the functions and apply them one-by-one, right? And so I could create an array of all three. And I could take whatever the value, and I could use reduce, or I can use map, and run it through all three.

[00:03:12]
I could make a function called, let's say, const repeatThreeTimesMakeLouder. Actually, let's say, yeah, makeLouderRepeatThreeTimes, AndEmbolden. Right, and that could take a string. And it could take the array and reduce it on through, right? We could write that. And that's effectively, spoiler alert, what compose is basically doing under the hood for us, just making us not do that.

[00:03:47]
We could say makeLouder, On the string. And then we could immediately pass the value of that into repeatThreeTimes. And then with that, we could embolden it. All right, and now we can say, console.log, And we'll say, hello. All right, you can kind of see it down here in the lower right corner, it works.

[00:04:23]
Now,we can see a world where doing this all the time isn't great, and this is what compose gives for us. So all we can do in this case is say, compose, And we'll say embolden, RepeatThreeTimes, and makeLouder. And maybe I'll even spell makeLouder right, I don't know, we'll see, right?

[00:04:48]
And I get the same result down there. It's a way to take multiple functions and compose a new function out of all those pieces, right? And that is one of the helper methods that comes with Redux, which means for those of you sports fans who are keeping track at home, we are now 20% of the way through the entire surface area of Redux.

[00:05:08]
And one of them was just a functional helper in this case.