Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Redux Compose" Lesson is part of the full, Advanced State Management in React (feat. Redux and MobX) course featured in this preview video. Here's what you'd learn in this lesson:

Compose runs multiple methods passing the argument and result along to each of the methods composed together.

Get Unlimited Access Now

Transcript from the "Redux Compose" Lesson

[00:00:01]
>> Steve: I'm gonna head over to this JS bin, and I'm gonna do some live coding. And you should be able to open it yourself and see what's going on or you can just watch on the screen, whatever makes you happiest.
>> Steve: I'll flip over.
>> Steve: So this is the five methods on the Redux library.

[00:00:25] If it looks slightly different it's because I have Redux as a global and I'm just pulling those five methods off. If I was using this in a Webpack build, it would be like import from the Redux library, but I'm not in that zone right now. So let's start to pick off these five.

[00:00:41] The easiest one to start with is compose, because compose is not actually Redux specific. If you've ever used composition with functional programing or the pipe operator, it's just a way to take a bunch of functions and chain them. Redux uses it, we can use it when putting together middleware, but we don't necessarily, it's not for Redux, it's just a helper method that's available.

[00:01:09] And so let's explore that one first. So let's say we had a few functions, we have a function called makeLouder, and that'll take a string. And returns string.toUpperCase.
>> Steve: And we'll make another function. We'll call it repeatThreeTimes.
>> Steve: No, I didn't pull up the MDM documentation on string and pick three random methods.

[00:01:40] That's definitely not what happened.
>> Steve: So we'll repeat that 3 times. And let's have one more, this one's gonna be called embolden.
>> Steve: This is gonna be a fun string prototype fact. We can also call string.bold. So these are all things that I can do with a string.

[00:02:02] And, ideally, what I would like to do is have a function called makeLouder and bold and repeat three times. Now I could write that function. I could have a function that takes a string and does something like,
>> Steve: makeLouder(string) and then I can pass that into repeatThreeTimes, and then I can pass that.

[00:02:34]
>> Steve: I copy that line. This is the important part of live coding, right? embolden, that will, theoretically, if I had a function that took a string and did that, but it's kinda hard to read that backwards. We don't really want to do that. All compose does is it takes a bunch of functions and returns a new function that, it waits for a value and passes it through all the functions that you gave it.

[00:02:54] Let's use actual code cuz words are hard. So we'll bring back that, say, const makeLouderAndBoldAndRepeatThreeTimes. And all we're gonna do is use compose and we're gonna pass it makeLouder and we'll pass in embolden and we'll pass it RepeatThreeTimes.
>> Steve: And so I grab that, I'll see that I have a function and if I pass it a string,

[00:03:37]
>> Steve: You can see that inside of a bold B tag I get HELLO three times, all capital, right? That's it, that's all compose does, we're done. So now we're down to four methods, so that's going pretty well.