{"id":23006653,"url":"https://github.com/aaronvb/redux-thunk-chain-api-requests","last_synced_at":"2025-06-12T17:32:02.179Z","repository":{"id":138759762,"uuid":"118852829","full_name":"aaronvb/redux-thunk-chain-api-requests","owner":"aaronvb","description":"Chaining API requests with redux-thunk","archived":false,"fork":false,"pushed_at":"2018-01-30T20:20:17.000Z","size":1362,"stargazers_count":5,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-02T11:01:38.538Z","etag":null,"topics":["api","axios","promises","react","redux","redux-thunk"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aaronvb.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-25T02:47:58.000Z","updated_at":"2020-09-06T20:11:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"87bd922b-6865-457d-af5f-bfca5f1e6426","html_url":"https://github.com/aaronvb/redux-thunk-chain-api-requests","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/aaronvb/redux-thunk-chain-api-requests","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronvb%2Fredux-thunk-chain-api-requests","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronvb%2Fredux-thunk-chain-api-requests/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronvb%2Fredux-thunk-chain-api-requests/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronvb%2Fredux-thunk-chain-api-requests/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aaronvb","download_url":"https://codeload.github.com/aaronvb/redux-thunk-chain-api-requests/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aaronvb%2Fredux-thunk-chain-api-requests/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259512066,"owners_count":22869335,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["api","axios","promises","react","redux","redux-thunk"],"created_at":"2024-12-15T08:13:13.760Z","updated_at":"2025-06-12T17:32:02.173Z","avatar_url":"https://github.com/aaronvb.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-thunk-chain-api-requests\nThis is an example on how to chain API requests using redux-thunk and axios.\n\n### Use Case\nWe 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.\n\n### Example\n[See the demo](https://aaronvb.github.io/redux-thunk-chain-api-requests/)\n\nIn 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.\n\n![redux-thunk-chain-api-example](https://user-images.githubusercontent.com/100900/35554723-c8a62f32-0540-11e8-9c16-2f4a2d66ea6b.gif)\n\n### How\nUsing 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.\n\nWith 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).\n\n### Where's the challenge in that?\nSo 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).\n\n### The Magic\nIt'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.\n```\nexport const requestIssuesAndIssueData = () =\u003e {\n  return (dispatch, getState) =\u003e {\n    dispatch(requestIssues()).then(() =\u003e {\n      const issuesArr = getState().issues.issuesById;\n      issuesArr.forEach(issue =\u003e {\n        dispatch(requestIssueCommentsHash(issue.number));\n      });\n    });\n  };\n};\n```\n\n### Running this example\nThe boilerplate for this example was created with [create-react-app](https://github.com/facebook/create-react-app).\n\nAfter cloning and cd, run the following:\n\n```\n$ yarn install\n$ yarn start\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronvb%2Fredux-thunk-chain-api-requests","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faaronvb%2Fredux-thunk-chain-api-requests","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faaronvb%2Fredux-thunk-chain-api-requests/lists"}