Check out a free preview of the full Advanced State Management in React (feat. Redux and MobX) course:
The "Exercise: Redux Thunk" 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:

Make Jetsetter use the API wrapped in asynchronous action creators (Redux Thunk).

Get Unlimited Access Now

Transcript from the "Exercise: Redux Thunk" Lesson

[00:00:02]
>> Steve Kinney: I'm gonna take you on a quick tour of the code base and then we'll take a break and do this exercise. Turns out in the Lib directory, there is this thing called API. Because computer set ups and like, remote people, it's actually using index DB to fake being a server but it is a promised based asynchronous library.

[00:00:25] I didn’t wanna have to worry about people setting up servers. So we actually have an API for storing items in local storage, removing them, toggling them, everything along those lines. What I want you to do is kind of again looking at the difference between a regular action creator, and our API abstraction, what we're gonna do is convert our applications to use thunks instead.

[00:00:51] So let's just really quickly look at the API library, again it is absurdly simple. So we have a few different items in here. And so you're gonna actually check out a branch called redux-thunk to start out with.
>> Steve Kinney: Or I might have to update this shortly. I'll make a branch called redux-thunk base really quickly.

[00:01:16] But the major things is, we can add an item, we can get all of the items. This will probably work, I just have the new version. We can add an item, we can get all of the items, we can delete an item, we can update an item, we can mark all of as packed.

[00:01:31] It's just an abstraction updating them all. This, we don't actually use right now, which is deleteUnpackedItems, but it's available. So, what we wanna do during this exercise is take our synchronous action creators and we're going to want to change them to make these API calls. So, you can just import API from lib/API and then if you do API.getAll with parentheses, that will return a promise.

[00:02:01] And when that promise resolves, then we wanna dispatch the action, right. So definitely check out those two previous slides, because that's gonna be the pattern you're going to implement. And then we'll go over that together.