{"id":16375062,"url":"https://github.com/mariocadenas/async-dispatcher","last_synced_at":"2026-05-10T05:53:51.995Z","repository":{"id":35067993,"uuid":"202669667","full_name":"MarioCadenas/async-dispatcher","owner":"MarioCadenas","description":"Higher Order Component to easily manage asynchronous redux actions","archived":false,"fork":false,"pushed_at":"2023-01-04T07:27:26.000Z","size":1142,"stargazers_count":0,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T07:03:15.307Z","etag":null,"topics":["async-action","async-redux","asynchronous-actions","react","redux","redux-actions","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/MarioCadenas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-16T06:16:19.000Z","updated_at":"2021-08-11T13:22:51.000Z","dependencies_parsed_at":"2023-01-15T13:08:41.185Z","dependency_job_id":null,"html_url":"https://github.com/MarioCadenas/async-dispatcher","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarioCadenas%2Fasync-dispatcher","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarioCadenas%2Fasync-dispatcher/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarioCadenas%2Fasync-dispatcher/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MarioCadenas%2Fasync-dispatcher/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MarioCadenas","download_url":"https://codeload.github.com/MarioCadenas/async-dispatcher/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239954756,"owners_count":19724300,"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":["async-action","async-redux","asynchronous-actions","react","redux","redux-actions","redux-thunk"],"created_at":"2024-10-11T03:19:25.221Z","updated_at":"2026-03-31T17:30:18.716Z","avatar_url":"https://github.com/MarioCadenas.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Async Dispatcher for Redux Actions\n\n[![CircleCI](https://circleci.com/gh/MarioCadenas/async-dispatcher/tree/master.svg?style=svg)](https://circleci.com/gh/MarioCadenas/async-dispatcher/tree/master)\n\n## Install\n\n```bash\nnpm install @mariocadenas/async-dispatcher\n```\n\n## Usage\n\n\u003e You must configure the dispatcher, so it can use the store.dispatch function. To do that, pass the store to the\n\u003e configureDispatcher function.\n\n`configureDispatcher`: function that receives the store object\n\nExample of configuration:\n\n```javascript\n// file where you create your store\n// ...\nimport { configureDispatcher } from '@mariocadenas/async-dispatcher';\n\n// ...\n// random example of store\nconst store = createStore(rootReducer, composeEnhancers(applyMiddleware(thunk)));\nconfigureDispatcher(store);\n\nexport default store;\n```\n\n`mapAsyncDispatch`: `\u003cObject\u003e`\n\n- `error`: Component you want to be shown when an error throws. It gets the error object as parameter.\n- `loading`: Component that will be displayed while data is being fetched.\n- `actions`: An array of asynchronous actions that your component needs data from. Component will receive\n  as props every action so you can call them inside the component to force an update.\n\n\u003e This object does not replace mapDispatchToProps, if you need to call async functions inside your component\n\u003e you can still do it. This is only for dispatching asynchronous actions that your component needs data from,\n\u003e but is not in the redux store yet.\n\nExample of use:\n\n```javascript\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport asyncDispatch from '@mariocadenas/async-dispatcher';\nimport { fetchTodos } from '@/actions/todos';\nimport ToDos from '@/components/todos';\n\nconst mapStateToProps = state =\u003e ({ todos: state.todos });\nconst mapAsyncDispatch = {\n  error: e =\u003e \u003cdiv\u003eError!\u003c/div\u003e,\n  loading: () =\u003e \u003cdiv\u003eLoading...\u003c/div\u003e,\n  actions: [fetchTodos]\n};\nconst ToDosConnected = connect(mapStateToProps)(ToDos);\n\nexport default asyncDispatch(mapAsyncDispatch)(ToDosConnected);\n```\n\n```javascript\n// @/components/todos\n\nconst Todos = props =\u003e {\n  // Here you can access to loading, error, fetchTodos, todos, any prop you passed.\n  // Any asynchronous action will be here too, so you can force an update ignoring the cache\n  return \u003cbutton onClick={props.fetchTodos}\u003eRefetch todos!\u003c/button\u003e;\n};\n\nexport default Todos;\n```\n\nWhile data is being fetched, you will see loading component instead of your component.\nOnce data is fetched, your component will be able to connect to the store, and get the data itself.\n\nIf an error occurs, you will get the error component, it gets the error message, so you can manage it.\n\nYou can use this in every component that needs this data, once its fetched, the function call will be cached,\nso it doesn't need to call every time a component mounts using this.\n\n## What is this trying to solve?\n\nThere are situations where you have 2 components in different routes,\nand both depend on the same data. So one of the components should make the call\nof the async action. The problem comes when you have an scenario like this\n\nYou have a route that displays the component `Todos.js`, this component has a dependency\nwith a todo-list that you are fetching from your database, for example using an async action\n`fetchTodos`, that you have defined in your redux actions.\n\n```\n/todos\n```\n\nThis component could be something like this\n\n```javascript\nimport React from 'react';\nimport { connect } from 'react-redux';\nimport { fetchTodos } from '@/actions/todos';\nimport ToDos from '@/components/todos';\n\nconst mapStateToProps = state =\u003e ({\n  todos: state.todos\n});\nconst mapDispatchToProps = dispatch =\u003e ({\n  getTodos: () =\u003e dispatch(fetchTodos())\n});\nconst ToDosConnected = connect(\n  mapStateToProps,\n  mapDispatchToProps\n)(ToDos);\n\nexport default ToDosConnected;\n```\n\nNow we can fetch inside `Todos` component all the todos.\n\nBut now, we also have this route\n\n```\n/todos/:id\n```\n\nThis route lets us see the details of the todo.\n\nThe problem is that we have a dependency with the full todo list. So if we reload\nthe page, we will not have the data. And we will not be able to display the component correctly.\n\nWe can solve this by fetching all data in the top component, but that is not efficient.\n\n## TODO\n\n- [ ] Improve documentation\n- [ ] Make error and loading properties to be optional, so user can manage them in the component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariocadenas%2Fasync-dispatcher","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmariocadenas%2Fasync-dispatcher","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmariocadenas%2Fasync-dispatcher/lists"}