Chaining async await API calls in Redux

Chaining async await API calls in Redux

While learning Redux I encountered several problems from which I will share the solutions to you in this article.

Let’s say you want to fetch data from the Pokémon API https://pokeapi.co/ using Redux.

Example: https://master.d1or1a1srkom3l.amplifyapp.com/
Github repo: https://github.com/sanderdebr/pokedex

We will handle these async API calls outside of our main reducers of actions, instead we will use Redux Saga.

Inside our saga we have a watcherSaga and workerSaga, everytime the action DATA_REQUESTED gets called it will fire our workerSaga which fetches the return of our API call.

Our fetch function fetchAll() is an async function that retrieves a list of pokemon names. Based on this list we retrieve details for every pokemon by nesting API calls within fetchAll(). The function returns aPromise.all object that contains nested fetches described in another function called fetchPokemon().

Besides that I’ve included a timer that returns the milliseconds it took to fetch the data.