Skip to content
Chaining API requests with redux-thunk
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
public
src Render issue comments Jan 30, 2018
.gitignore Let's not use docs or build, instead create a new repo for the demo. Jan 30, 2018
LICENSE.md Add MIT license 😎 Jan 25, 2018
README.md
package.json Update README with demo url Jan 30, 2018
yarn.lock

README.md

redux-thunk-chain-api-requests

This is an example on how to chain API requests using redux-thunk and axios.

Use Case

We need to fetch an initial array of objects that each contain an ID. We then need to individually fetch the objects data with the ID and populate another model with the returned data. It would also be cool if we could show an initial list of objects, and update them in the UI as we fetch them individually.

Example

See the demo

In this example app, we will fetch an initial array of issues from https://github.com/facebook/react/issues, and then iterate over every issue in the array to fetch its detailed information(comments, etc) that are not provided in the initial array.

redux-thunk-chain-api-example

How

Using GitHub's API for issues (https://developer.github.com/v3/issues/), we can get a list of issues from the above repo using GET /repos/facebook/react/issues, this will return a response array that contains the issues.

With the array of issues we can then loop through each issue and fetch it issue using GET /repos/facebook/react/issues/:number (:number being one of the issues in the above array).

Where's the challenge in that?

So now that we know how to get the data, how can we do this asynchronously and cleanly update the state as we go through each issue(providing a better user experience if we chose to display that).

The Magic

It's simple! We can chain each redux-thunk action as long as they return a promise. In our case, we return an axios promise in each of our chained actions. Using getState we can provide our second action the data it needs.

export const requestIssuesAndIssueData = () => {
  return (dispatch, getState) => {
    dispatch(requestIssues()).then(() => {
      const issuesArr = getState().issues.issuesById;
      issuesArr.forEach(issue => {
        dispatch(requestIssueCommentsHash(issue.number));
      });
    });
  };
};

Running this example

The boilerplate for this example was created with create-react-app.

After cloning and cd, run the following:

$ yarn install
$ yarn start
You can’t perform that action at this time.