Redux Thunk Setup

[00:00:00]
>> So talking about thunks is fun. But what do you say we implement one? All right, cool. So we'll kinda go in here, and so tweet-stream, ideally, should basically, I have a very simple API. We actually check it out. So we do need to kick it off, right?

[00:00:38]
And so this tweet-stream here will basically, I have a little node server that is listening to the Twitter live stream for anything with the word JavaScript. Apparently, it is all do you like a desktop, or a notebook computer, and some jobs? There is nothing more terrifying than revolving on a Twitter live stream.

[00:00:55]
But here we are. That way, we could have some some new data along the way. And so the tweet-stream will basically have an API that we can hit up, and we can do stuff with. Let's actually fire it up, With npm start. And as we do that, we'll kinda take a tour of the code.

[00:01:20]
All right, so index isn't anything really all that special. It's some basic Redux boilerplate. We're gonna need to modify this to use the Redux thunk middleware at some point. An empty actions file, a reducer that we're gonna need to put some stuff in. We're using a function here, and combining it immediately.

[00:01:44]
And we've got some react components that we can use. So first thing we need to do, is we need to pull in the middleware. And then we saw earlier that apply middleware function that comes with Redux. That will give us the ability to pop that piece of middleware into the middle of our flow that we saw earlier.

[00:02:06]
So we'll go in, and we'll go into index.js. And we'll kinda pull in. So createStore, we need createStore. We're gonna need applyMiddleware. And then okay, what middleware do you wanna apply? So import thunk from redux-thunk. Now, the other thing is when we create the store, we're gonna say applyMiddleware, and we'll give it that thunk.

[00:02:39]
Cool, so now we've effectively installed Redux thunk. Now, what we need to do is create a action creator, I use air quotes there. An action creator, that's gonna return a function that is eventually going to dispatch an action. Redux wants to stay. Redux wants no business in your async.

[00:02:58]
It's trying to stay in a world of pure functions. All that stuff should be isolated out to middleware, should not happen in your reducer, should ideally not have in your map dispatch to props, or anything along those lines. So actions, we'll go ahead, we'll say export const fetchTweets.

[00:03:22]
And this now needs to return a function. Which will go ahead, and it will fetch. I will go back over here. We'll deal with that momentarily. We've got this tweet stream. And if we go to api/tweets there, it's a giant JSON mess of all the data you get back from the Twitter API.

[00:03:57]
We can just paste it in there. So it's just tweet-stream.glitch.me/api/tweets. So we'll fetch that, and we're just using a fetch API, right? You can use anything you want. You don't have to use a fetch API. If you wanna use axios, use axios. If you wanna use jquery.ajx, use jquery.ajax, right?

[00:04:18]
Use whatever way you like to hit APIs. I'm just gonna go with the built-in one, mostly. I don't wanna play favorites here. So the fetch API, you basically have to say whatever it is, how do you wanna parse it, right? And so we know that it's JSON, cuz the fetch API is super flexible.

[00:04:35]
It can fetch your images. It can fetch you blobs, so on and so forth. We're saying this is JSON. And then we'll just say turn into JSON, we'll say response. We'll just console log it for now. We'll console log this dispatch, right? Which is just gonna be a function.

[00:04:53]
It won't be anything truly surprising. But this is it, right? This is how you can add a synchronous code to your Redux store. Now, if you're like, I think it's generally a good idea to have a belief system that if something seems easy, it is probably a foot gun, right?

[00:05:13]
Anything that's easy means that let's say you had hit multiple APIs. It's again, it's just JavaScript. And you're gonna end up in callback hell, right? And coordinating a bunch of stuff, because there is no abstraction. When we saw editing, objects immutably was hard. We made an abstraction, and made it easier, right?

[00:05:36]
With that kinda add entity, and stuff along those lines. Because this is so transparent and simple, it means that you're on the hook for dealing with. Okay, what if something happened? What if a user hit cancel, and we don't actually want to do the thing when this promise resolves?

[00:05:51]
We'll deal with that in a little bit. So it is simple, but simple means that all the stuff that it doesn't do, you're on the hook for. So if I'm doing a small project, we'll absolutely reach for this, because it's a very easy way to do it. But if things get more complicated, you will be on the hook to deal with that.

[00:06:09]
So let's go into this fetchTweets. Basically, go ahead, and we have this, we're going ahead. It's calling this function that doesn't exist. Unclick, right? I can go over. Oop, I gotta fix SASS, so we'll fix. While SASS rebuilds, I'll implement this. So yeah, right now, hitting that fetchTweets button.

[00:06:42]
It's a button that says fetchTweets. We'll see in a second, doesn't do anything. Now, I could create a container. I could do all that stuff we did before. I'm just going to keep it simple for now. This is mostly to get a sense of Redux thunk. So what we'll do is we'll pull in connect from react-redux.

[00:07:07]
And we remember that we made that action creator called fetchTweets. Let's grab that too. Let me make sure I exported it. I did. So I'll import fetchTweets from ./actions. And we'll just connect it right here. So we'll export default connect. We're not mapping a state to that button.

[00:07:36]
We're just gonna pass in the fetchTweets as our dispatch. And they'll give it that fetchTweets component. Right, I mean, the hard work has already been done in that action creator. Let's just check out. Got the fetchTweets in here. That's the right one, perfect. And then the tweets we're gonna need to hook up to, cuz fetchTweets is going to get the tweets.

[00:08:07]
It's gonna put it into Redux. But then the tweets component still needs to read that state, and be able to map it out. So we'll go in there. Right now, it's just a dumb component. We'll do something very similar to what we did before, which is, we'll import connect from react-redux, great.

[00:08:32]
And then we'll just export default that as well. We'll give ourselves a MapStateToProps. It's a pretty easy one. That'll take state. In fact, really, we just wanna pull the tweets off that object. I could just hand this as the first argument to connect. I don't need to put it in a variable.

[00:09:01]
He says, as he decides to put in a variable. So MapStateToProps around the tweets component.