Check out a free preview of the full Complete Intro to React v2 (feat. Router v4 and Redux) course:
The "Using Middleware & Thunks in Redux" Lesson is part of the full, Complete Intro to React v2 (feat. Router v4 and Redux) course featured in this preview video. Here's what you'd learn in this lesson:

Brian adds the redux-thunk library to the application. This middleware will facilitate the exchange between synchronous and asynchronous actions. Before worrying about the asynchronous actions, Brian adds the addOMDBData reducer the existing reducers in the application.

Get Unlimited Access Now

Transcript from the "Using Middleware & Thunks in Redux" Lesson

[00:00:00]
>> Brian Holt: So let's go make that work Redux now.
>> Brian Holt: Let's go to your store.js.
>> Brian Holt: And we need to import.
>> Brian Holt: Thunk from redux-thunk, I also thought that was a weird word, thunk. We also need to get something else from redux and it's called the applyMiddelware. As you may guess, it's a function that allow us to modify the way that redux works.

[00:00:45]
>> Brian Holt: Okay, so above our type of business right here, we're gonna say applyMiddleware(thunk) comma.
>> Brian Holt: And now magically, Redux has the ability to understand functions in addition to actions.
>> Brian Holt: Or thunks, right? As is the case.
>> Brian Holt: Any questions?
>> Brian Holt: Okay, so let's go to actions.js. What we're gonna do now is we're gonna make it so we can add OMDB data to our Redux store.

[00:01:46] So we're gonna export a new link called ADD_OMDB_DATA = 'ADD_OMDB-DATA'. So first we need to create the synchronous action to change our store. Because everything that's still modifies Redux directly has to go through the same action process, right? Thunks themselves don't actually modify the store. They still dispatch actions which modify the store.

[00:02:14] They just dispatch actions later, right? It's kind of a delayed dispatching of actions. It's not even kind of, it's literally what it is. [LAUGH] Okay, so go to reducers.js. We're going to also import ADD_OMDB_DATA. ADD_OMDB_DATA. And we're gonna do OMDB_DATA.
>> Brian Holt: And it's gonna be an empty object.

[00:02:53] So every time that we get a new TV show in, we're gonna set the key to be equal to like 'tt12345', right? Whatever the OMDB data thing is. And this is going to be the data, right? It's gonna be another object full of its data. That's what it's gonna look like, but for now it's just going to be an empty object.

[00:03:13] Okay.
>> Brian Holt: Then we're going to create a new reducer called, addOMDBData.
>> Brian Holt: Equals state, action,
>> Brian Holt: Okay, const newOMDBData.
>> Brian Holt: Equals object. We're gonna do object.assign(newOMDBData, state.omdbData).
>> Brian Holt: And then, action.imdbID.
>> Brian Holt: New omdb data, not newOMDBData, action.omdbData.
>> Brian Holt: Okay? So newOMDBData is going to be the new value of this object right here, right?

[00:04:36]
>> Brian Holt: If you've never seen this square bracket syntax, this is just saying from my action, I'm gonna get an imdbID and I want that to the key here, right. That's what the square brackets mean if you've never seen that before. And then the value, so the key is imdbID, the value is omdbData which will both come from the action that we will dispatch from our action creator.

[00:05:08] Okay, underneath that, we're gonna do const newState equals a new object. I wanna say objects.assign newState, state, and omdbData to new omdbData, and return newState.
>> Brian Holt: So we're just doing two layers of merging here, that's all.
>> Brian Holt: Any questions about that reducer?
>> Brian Holt: Just doing some deep merging.

[00:06:00] That's really all there is to it.
>> Speaker 2: You mentioned again with the square brackets action.imdbID, assuming again that's,
>> Brian Holt: So let's say that the action came in that looked like this, right? It'd be type ADD OMDB_DATA, right. The omdbData would be an object full of lots of stuff, right, like poster, rating, all that kind of stuff.

[00:06:29] And the imbdID will be something like tt12345, right? Like a unique identifier for it. So what we wanna do is inside of our store, we want to represent that as a giant key value store where the key is tt12345, and the value is whatever omdbData was, right. So by saying, action.imdbID like that.

[00:07:05]
>> Speaker 2: I see it's the object, it's just the [CROSSTALK].
>> Brian Holt: It's the output of whatever that expression was.
>> Speaker 2: Yep, okay.
>> Brian Holt: And then the OMDBData, right?
>> Brian Holt: Okay, so now, we need to go put a case in our route reducer. Case ADD_OMDB_DATA.
>> Brian Holt: Return addOMDBData with state and action.

[00:07:51]
>> Brian Holt: Okay, so now our reducers are capable of handling this new action. So now, we need to make that work inside of action creators.