Loading
Lesson 14
Courses / Introduction to Redux Saga
Course Review & Conclusion - Learn Redux Saga Tutorial

Video Transcript

Congratulations on reaching the end of this course. In this lesson, we're going to do an overall review of everything we did in this course. So let's do it. So going back here to our introduction to Redux Saga with React, we had a following data structure with a list of fruits. Each object in this array represents a fruit. So we have a simple list of fruits, orange, strawberry. To get that data, we need to make a asynchronous HTTP request. So we created a simulated backend with this API.js, with this findAll function, that after two seconds to simulate some delay, it either resolves with some fruit data that we hard coded here, or it rejects with an error so we can test the error handling. So this is just fake backend so we can do something, how to approach this asynchronous request. So we return a new promise to simulate the asynchronous. Anyway, so we started off configuring Redux, creating our store, creating our reducer, and so on. Then we went on to apply the middleware after doing some UI work to connect to the Redux store using the connect middleware, maps state to props, maps to special props, all that kind of stuff. So in order for you to apply the Redux Saga middleware, first you have to import from the Redux Saga package. I call it createSaga middleware, following the documentation naming convention. Then you call it, get some value in the store in the Saga middleware variable. Then you pass it to the apply middleware that you use as an argument to create store. So the middleware will be active every time you emit an action, it's going to go through the middleware before it actually hits the reducer. So don't forget you always have to run the sagas with the Saga middleware.run method, and you have to create those sagas. We did so in a file. Saga is just a generator function, a function with a star, and we learned a little bit about that, how to use statements. So when you call the generator functions, you actually get the generator object. And in order for you to run the statements in the function body, you keep calling the generator objects dot next method, it will go up to the next new, evaluate that statement, and you would back with an object with two properties, the value, which contains the you that value from the statement, and then the done flag that indicates whether it's done true or false, going through the whole function body. So what we did was in the app.js, we call an action creator called fetch fruits in component dead mount. This extra create is bound, so it will automatically dispatch the action it returns, which is the fetch fruits request. Now because this action is dispatched, it's going to go through the middleware. Now redux saga has a root saga here, we use the take latest effect to keep listening for this action to be to come up. So keep listening until when it comes up, it executes the fetch fruits saga. So this root saga wrote here is like a watch saga, where it's watching for these action types. So when it gets that, it executes the fetch fruits and makes an HPE request. When our case is simulated with using this fake backhand call, right, this function find all which is simulating backhand. We call this function with no arguments, and this call is from redux saga, it's a declarative effect. It's actually an instruction for the middleware to perform some action, some statement, some in this case calling a function. We don't call the function directly, we could do that, but it's the redux saga way is always to give instructions to the middleware instead of actually doing the work ourselves. The middleware is going to do the actual work of calling the function. And then if this promise resolves with a value, that value is going to be placed in the variable here, fruits, and then we finally emit the fetch fruits succeeded action whose play load is the actual data with the fruits. If there's any problem with this call, which should, for example, it rejects this promise, rejects with an error, then an error is going to be thrown in this block. Since we use a try catch block that would cause the execution to shift to the catch block which in turn it puts or sends an instruction to dispatch an action of type fetch fruits failed with the error message as the payload. Now it's all nice, but nothing is done alone by redux saga, we still have to do our reducer work. So all that reducer rambling of the action is done in the reducer file. We have an initial state with the actual data, some flag for loading and some error message description. And then we handle the actions as follows. Once we get the request that we set error to no to clear, and then we indicate the application is loading fruits, then if it succeeded, it sets fruits with the actual payload obtained from the fake back end and then sets loading back to false. In case there is an error and then it sets the error with the payload and sets loading to false. So that's pretty much it for the reducer. And it keeps going like that. The app is going to reflect the changes because we use this dot props dot fruits for the fruit list component. So that's pretty much it to conclude this course. If you would like to add more sagas, more action creators, for example, if you want to make an action creator to fetch only a single fruit by ID, all you have to do is you create an action creator fetch fruit here that takes the ID, then you emit the action, for example, fetch fruit in a singular requested, and you do the same approach as before. You do that, then you make a reducer property for a single fruit, may add the error and loading flag for that fruit. And then once you have these guys, you can add the handling here, the same fashion, then for the saga, what you have to do is the following. You go to the saga, and then you add another here in the watch saga, the root saga, you add another you to take latest the new action Fred fruit sequester. So this guy is these you can think of these guys as running in parallel, listening in parallel. So it's going to listen if you get that do that. And then if it gets that action, it's going to do some other thing, you're going to say fat fruit. Okay, so you just write it in the same fashion like this, make a call to a new API. This case would be fine one. And then you put, and then you catch any errors and do fail. And that's pretty much it. Note that the call is going to be different because there's an argument, the actual ID of the fruit. So that could be in the action payload right here. So you could say action dot payload dot ID or something like that, fruit ID. And that will be the argument to the fine one, right? If you were doing the fat fruit singular. Okay, so that's it. And when you call the action creator, make sure to include the ID there so we can get it here. And that's the way you do it for another saga. And you can add as many as you want here in this root, root saga watcher. And then you just define different generator functions for each of those, each of those operations. Okay. So that's all. Thank you so much for watching this course. And I hope you learned a lot and thank you. And until the next time, bye.
No comments yet (loading...)
No comments yet (loading...)
Did you like the lesson? 😆👍
Consider a donation to support our work: