Introduction to Redux Saga with React

Welcome everyone! This course will be an introduction to Redux Saga using React. In a typical React application, we need some way to manage the application state, that is, all the data that's stored in the application. One of the most popular libraries to do that is called Redux. In Redux, you dispatch actions that in turn are handled by reducers. Those reducers will take the action if it is important, if it cares about it, and will modify the application state accordingly, returning a new state every time. Now, those actions are typically dealt with in a synchronous manner. How can we handle those actions in a synchronous fashion? Most applications will have to make some sort of HTTP request of some manner to get some data from a server, right? Now, you make a request, and then you have to wait a little bit to get a response. So it's not a synchronous process. It is an asynchronous process. Redux Saga allows you to deal with those asynchronous actions. So Redux Saga is innovative in a way that it uses the concept of generator functions in its handling, how we implement all these asynchronous actions. Okay, so the course we follow in the following fashion. We're going to have a simple list of fruits. It's just a very simple app where you have one fruit per bullet point. Now in terms of what the data structure will look like, we can have some JSON, an array of objects. Each object representing a fruit has an ID and has a name property. That's the name of the fruit. For example, first fruit in the record is apple, the second record is orange, and the third record is strawberry. So think of this as your database. So we're going to make a simple list of fruits. Now to achieve that, we're going to start off with just the overall app component, and then we're going to make a separate component for the fruit list. Okay. Now the steps to in this course, we can generalize as follows. First you're going to generate the project using create react app. Then we're going to set up Redux. After that, we're going to hook up Redux Saga. We're going to learn how to do that. Then we're going to build the user interface, which is very simple, just a list of fruits. Then we can start off with fake data and then later do the actual HTTP request to a fake backend. We're going to simulate. To do that, we're going to use Redux Saga to do our asynchronous actions. Typically we would have three types of actions, the requested, the succeeded, or the failed. So you dispatch an action to obtain a list of fruits. Then we're going to have to wait until we get the actual data. When the data, we get the data, we're going to emit another action called succeeded. In case there is a problem in that request, we're going to emit the failed action. That's how we're going to start off in this course. Okay, so until the next class.