This course has been updated! We now recommend you take the State Management with Redux & MobX course.

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

Walkthrough of the solution to the Offices and Dragons exercise.

Get Unlimited Access Now

Transcript from the "Redux Sagas Solution" Lesson

>> Steve Kinney: So here, we have the working version where you can see we're requesting a new friend and then that's got no actual like data with the action. Cuz we're simply firing off the request. Then at the friends list, that's where we have the data in this case. So we break this up into two parts and it's really interesting to kind of look at it just in the actions file for this simple situation where these are entirely our actions.

[00:00:32] They are just objects. We're back to this very easy to test, easy to work with situation and then on that button is where we use connect to pass in this request due for an action. When that fires, the saga intercepts it. Figures out all of our asynchronous stuff and then goes back to a very easy synchronous world.

[00:00:53] Let's actually take a look at what we did. It looks very similar to what we did and adjusted earlier where we bring in the request new friend constant, and we are listening for every single one of those. And when those happen, we make an API.request where we just call the API.

[00:01:12] You could write fetch in here. I tend to like to abstract out all these things. So if I change them or I can have different situations in testing and development, and production for different endpoints, and stuff along those lines. So we call it. We'll get back into this function.

[00:01:27] This function will pause as that Api.request goes out like the browser's free to do other stuff. When that promise resolves, that'll be when it calls .next on this generator. Passing in the results of that promise which point now we have it in friend and then we can go ahead and kick it off again and put out that new action to put it onto the user interface.