Redux Observable Setup

[00:00:00]
>> Steve Kinney: We've got our create store, we do need to pull in our middleware. This one's gonna be a little bit different. Which is like before, we just grabbed the thunk middleware, and we just pulled it in. This one, we're going to need to basically create an instance and start it listening because it kind of sits aside everything.

[00:00:19]
So we'll get to that in a second. But the apply middleware will create effectively an epic listener, if you will. And then we'll go through and we'll kind of pull it in. So instead of just being the thunk, we actually need to bring in import,
>> Steve Kinney: This create, I love this name, create epic middleware, right, from Redux observable.

[00:00:50]
Seems really cool, right? And so on top of your reducers, you're also gonna have this idea of a, you had a root reducer. We're also gonna have this idea of a root epic, right? And so the reducers will be listening and the epics will also be listening, in order to go ahead and create more of them.

[00:01:08]
I'm gonna just comment this out for a second, cuz we're gonna go implement this epic, cuz we need to have that route epic. Otherwise this doesn't really do a lot, so we'll go ahead and we'll write that. Let's go ahead and set up some of our actions
>> Steve Kinney: So we're gonna import search from the,

[00:01:40]
>> Steve Kinney: ./api, which we'll need to deal with a second.
>> Steve Kinney: And,
>> Steve Kinney: What we're gonna do is we're gonna have the ability to fetch our characters. So we have an event that gets fired when the user wants to fetch some characters, right. And this will happen on a keystroke in that input field, right.

[00:02:02]
So every time they make a keystroke, we're gonna go ahead, we're gonna fire it. But then the epic is gonna fire a new action saying, I got the thing, right. And so Redux, completely unaware of any side effects happening. This epic is kind of sitting over on the sidelines and doing it for us.

[00:02:16]
So we'll make some of these export consts, fetch characters.
>> Steve Kinney: Right, and we'll do an export const, fetch characters. And you can call it fetch characters fulfilled, right? One, were we asked to do it? Now this is great because we don't have to dispatch multiple actions for, all right, they're gonna load it.

[00:02:48]
We know that if fetch characters has fired and fetch characters fulfilled has not, right, then we know that we're loading, right. And we actually have kind of a middleware that looks for anything with fetch in it, and will fire off, will set us up actions for loading and error states, right.

[00:03:12]
But that's kind of a little bit bespoke and out of the ordinary. So we'll do this export const. So when we did it with thunk we had we did a we had a weird action creator that returned a function. We're not doing that anymore, everything is going to be just regular old,

[00:03:41]
>> Steve Kinney: Regular old actions as we've seen and loved before, right? Which is we'll just return, something of the type, fetch characters, and payload will be whatever search term we were looking for, right, whatever is currently in that input field. All right, neat, and then fetch characters fulfill is again, just a normal action creator, there's nothing special about it.

[00:04:17]
>> Steve Kinney: We'll get some payload whatever we hear back from the API, I could call it API result, I can call it whatever I want.
>> Steve Kinney: Type : FETCH_CHARACTERS_FULFILLED and whatever that payload is, just pass it through. I'm just mostly being lazy. I'm sorry. What is the famous Larry Wall thing?

[00:04:38]
Programming is laziness, hubris, and something along those lines and impatience. Are they hallmarks of a great programmer? Cool, all right, so let's write the epic. Were gonna have to get to that API helper in a second but we'll deal with this momentarily. Let's make a, I don't know, let's call it fetch-character-epic.js.

[00:05:08]
So again, the squirreliest parts of this are going to be RXJS. And we're gonna have to pull in a bunch of different helpers in this case. So we'll have this import Ajax, which is from RXJS, because everything's got to be hooked in and knowing about observables. So RXJS/ajax.

[00:05:31]
>> Steve Kinney: This next one, this of type, is a redux observable one, because redux observable is again, in the same way we had some helpers in react redux that knew about find action creators and connect to stuff along those lines. These are the things that help us out here.

[00:05:47]
We'll bring it in from redux-observable. And then, the things that we need to do, right? So map and merge map, we'll talk about those in a second. From rxjs/operators. And then, we're gonna pull in both the action that's gonna kick things off, which is fetch characters and the action creator that is going to happen when we're all done here.

[00:06:17]
Right, so we will import the fetch characters type, because we have that of type helper online, too. So we're gonna look at all the actions to come through, let's see if I get some. Yeah, there we go. And we'll have this,
>> Steve Kinney: Those two, all right. So we're gonna have the ability fire off AJAX, the ability to look at the type of an action, some mapping to transform the action, right.

[00:06:47]
So anytime a fetch characters comes through, we do some Ajax and we take that action and transform it into the hey, we've got all the characters action. And then the things that we need to actually send that to regular old Redux, cool. And we'll make this fetch characters epic.

[00:07:08]
>> Steve Kinney: And before when I showed you the example, this takes two arguments, it takes the action we're looking at and it will actually take the current state of the entire store. So if you need other things, if you need to know other things that are happening in the store in order to figure out what to do, you have access to it.

[00:07:23]
We don't need it in this case, but it is available to you if you do.
>> Steve Kinney: And then we'll return. For every action that comes through, we used pipe and redux composed before. We're gonna run it through a series of functions, right. And so first of all, we're gonna do this of Type.

[00:07:48]
So figure out, take that action and pump it into this first function that is gonna figure out, are you of the type FETCH_CHARACTERS? That will either return true or false. It is either action of the type FETCH_CHARACTERS or it's not. And then we're gonna do this merge map because we're gonna need to do is a few other things in here.

[00:08:07]
A merge map is very similar to flat map, which is, it's a radar prototype map, but it will also take nested things and bring them all up to the top level. Cool. So we'll just kind of take our Ajax and it has a method called get JSON. And now you could just pull that off directly, if you wanted to, that's fine.

[00:08:31]
Cool, and we'll say,
>> Steve Kinney: I think search is just gonna be our endpoint. So I'll actually just pull that in, because I need to fire up Glitch anyway, characters.
>> Steve Kinney: All right, I'm gonna wake that up. And you can see, it's got a few different endpoints, I can get all the characters, I get an individual and this is from the Star Wars API, open API.

[00:08:57]
I just kind of modified a little bit so I can actually go ahead and do a query. Cool. So we'll actually say,
>> Steve Kinney: Endpoint API, just for the letter L, we'll say slash search. So take that endpoint.
>> Steve Kinney: And we'll add whatever the search term is. I'm just gonna put have a trailing slash there.

[00:09:32]
And so remember, when we dispatch that action, we had the search term in the payload? So we'll take a look at the action. We'll say action.payload.searchterm.
>> Steve Kinney: Cool.