Handle Side Effects with Redux Saga Generator Functions

Instructor: [00:00] We have a basic React and Redux application. Inside this div, we want to map over our "Star Wars" reducer and print to the page a list of Star Wars characters' names under the title.

[00:12] This will be initiated when clicking on this "Load more" button which you can see in the UI. We need to add an onClick handler. This will be calling the fetch Star Wars request action creator that you can see we are getting through props already.

[00:27] However, when we click on the button, nothing is happening. This is where we want redux-saga to listen to the store.dispatch of fetch Star Wars request and do two things. The first is send an AJAX request to the Star Wars API. The second is to dispatch a success action that will carry the response data to our reducer and get picked up by a UI here.

[00:47] Now we'll navigate to our actions file and import call and put from redux-saga/effects. As you can see, we already have this fetch Star Wars request action creator. This is what's dispatched when we click on that "Load more" button from the UI.

[01:03] Now we can create our Saga generator function. We're going to export it and call it fetchPerson. It receives an action object. We want to use a try/catch so we can handle any errors. We want to do const person equals yield call API and a string URL.

[01:24] Both call and put are referred to as object effects by redux-saga. Here we're assigning the yielded value to const person so that we can use it later inside of our function. The first parameter is a function. The rest of the provided call parameters will be spread out into this API function. Call will return whatever the provided function returns.

[01:47] Let's make this function up here at the top. We'll do const API where it will receive this URL as a parameter and the ES6 fetch where we'll return the unwrapped promise. Now that we have the API part set up, we need to yield put an action creator with a type and a data property.

[02:10] The put effect works just like the Redux store.dispatch. Here we're actually dispatching this action creator with the fetch Star Wars success type and the results from our previous API call. If our reducers that are connected to the store have logic to accept this type, it will use this data to print to the UI.

[02:33] The beauty of redux-saga is it utilizes the yield keyword to suspend dispatching this action creator until the fetch promise has resolved, thus making asynchronous things, like fetch in our case, synchronously.

[02:47] It's also important to know that fetchPerson will automatically receive the action that initiated it. This action here, when dispatched, will invoke fetchPerson. This is handy because sometimes we need to pass through case-by-case information that's needed inside effects.

[03:04] We'll finish up by adding a console log inside of our cache to log out any errors we might get if our Star Wars API fetch fails. We can also use the put effect to dispatch an error action to display a message to your user.