{"id":16480610,"url":"https://github.com/fredericheem/redux-act-async","last_synced_at":"2025-05-11T07:31:20.743Z","repository":{"id":57350094,"uuid":"52542516","full_name":"FredericHeem/redux-act-async","owner":"FredericHeem","description":"Reduce boilerplate for redux async actions and reducers","archived":true,"fork":false,"pushed_at":"2019-09-01T20:54:06.000Z","size":157,"stargazers_count":125,"open_issues_count":4,"forks_count":22,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-01T19:17:19.292Z","etag":null,"topics":["async","redux"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FredericHeem.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2016-02-25T17:12:44.000Z","updated_at":"2024-11-26T10:52:33.000Z","dependencies_parsed_at":"2022-09-16T10:20:57.609Z","dependency_job_id":null,"html_url":"https://github.com/FredericHeem/redux-act-async","commit_stats":null,"previous_names":[],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FredericHeem%2Fredux-act-async","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FredericHeem%2Fredux-act-async/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FredericHeem%2Fredux-act-async/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FredericHeem%2Fredux-act-async/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FredericHeem","download_url":"https://codeload.github.com/FredericHeem/redux-act-async/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253533393,"owners_count":21923424,"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","redux"],"created_at":"2024-10-11T13:04:46.628Z","updated_at":"2025-05-11T07:31:20.481Z","avatar_url":"https://github.com/FredericHeem.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redux-act-async\n\nCreate async actions and reducers based on [redux-act](https://github.com/pauldijou/redux-act)\n\n## Install\n\n```bash\nnpm install redux-act-async --save\n```\n\n## Badges\n\n[![Build Status](https://travis-ci.org/FredericHeem/redux-act-async.svg?branch=master)](https://travis-ci.org/FredericHeem/redux-act-async)\n\n[![codecov](https://codecov.io/gh/FredericHeem/redux-act-async/branch/master/graph/badge.svg)](https://codecov.io/gh/FredericHeem/redux-act-async)\n\n[![npm version](https://badge.fury.io/js/redux-act-async.svg)](https://badge.fury.io/js/redux-act-async)\n## Usage\n\n```js\n\nimport thunk from 'redux-thunk'\nimport {createStore, applyMiddleware} from 'redux';\nimport {createActionAsync, createReducerAsync} from 'redux-act-async';\n\n// The async api to call, must be a function that returns a promise\nlet user = {id: 8};\nfunction apiOk(){\n  return Promise.resolve(user);\n}\n\n// createActionAsync will create 4 synchronous action creators:\n// login.request, login.ok, login.error and login.reset\nconst login = createActionAsync('LOGIN', apiOk);\n\n/*\ncreateReducerAsync takes an async action created by createActionAsync.\nIt reduces the following state given the four actions:  request, ok, error and reset.\nconst defaultsState = {\n    loading: false,\n    request: null,\n    data: null,\n    error: null\n};\n\nif you need to overwrite the defaultsState just insert your initialState as a second paramenter in the createReducerAsync function. Just like that:\n\nconst initialState = {\n    loading: false,\n    request: null,\n    data: {custom: \"intitial data\"},\n    error: null\n};\n\nconst reducer = createReducerAsync(login, initialState)\n\n*/\nconst reducer = createReducerAsync(login)\n\nconst store = createStore(reducer, applyMiddleware(thunk));\n\nawait store.dispatch(login({username:'lolo', password: 'password'}));\n\n```\n\n## Legacy redux\n\nIn a nutshell, the following code:\n\n```js\nconst options = {noRethrow: false};\nconst loginAction = createActionAsync('LOGIN', api, options);\nconst loginReducer = createReducerAsync(loginAction)\n```\n\nis equivalent to:\n\n```js\nconst LOGIN_REQUEST = 'LOGIN_REQUEST'\nconst LOGIN_OK = 'LOGIN_OK'\nconst LOGIN_ERROR = 'LOGIN_ERROR'\nconst LOGIN_RESET = 'LOGIN_RESET'\n\nconst loginRequest = (value) =\u003e ({\n  type: LOGIN_REQUEST,\n  payload: value\n})\n\nconst loginOk = (value) =\u003e ({\n  type: LOGIN_OK,\n  payload: value\n})\n\nconst loginError = (value) =\u003e ({\n  type: LOGIN_ERROR,\n  payload: value\n})\n\nconst loginReset = (value) =\u003e ({\n  type: LOGIN_RESET,\n  payload: value\n})\n\nconst options = {noRethrow: true};\n\nexport const login = (...args) =\u003e {\n  return (dispatch, getState) =\u003e {\n    dispatch(loginRequest(...args));\n    return api(...args, dispatch, getState)\n    .then(response =\u003e {\n      const out = {\n          request: args,\n          response: response\n      }\n\n      dispatch(loginOk(out))\n      return out;\n    })\n    .catch(error =\u003e {\n      const errorOut = {\n          actionAsync,\n          request: args,\n          error: error\n      }\n      dispatch(loginError(errorOut))\n      if(!options.noRethrow) throw errorOut;\n    })\n  }\n}\n\nconst defaultsState = {\n    loading: false,\n    request: null,\n    data: null,\n    error: null\n};\n\nconst reducer = createReducer({\n    [actionAsync.request]: (state, payload) =\u003e ({\n        ...state,\n        request: payload,\n        loading: true,\n        data: null,\n        error: null\n    }),\n    [actionAsync.ok]: (state, payload) =\u003e ({\n        ...state,\n        loading: false,\n        data: payload.response\n    }),\n    [actionAsync.error]: (state, payload) =\u003e ({\n        ...state,\n        loading: false,\n        error: payload.error\n    }),\n    [actionAsync.reset]: () =\u003e (defaultsState)\n} , defaultsState);\n\n\n```\n\nThat's 3 lines against 78 lines, a good way to reduce boilerplate code.\n\n## Async Action Options\n\nHere are all the options to configure an asynchronous action:\n\n```javascript\nconst actionOptions = {\n  noRethrow: false,\n  request:{\n    callback: (dispatch, getState, ...args) =\u003e {\n    },\n    payloadReducer: (payload) =\u003e {\n      return payload\n    },\n    metaReducer: (meta) =\u003e {\n      return ASYNC_META.REQUEST\n    }\n  },\n  ok:{\n    callback: (dispatch, getState, ...args) =\u003e {\n    },\n    payloadReducer: (payload) =\u003e {\n      return payload\n    },\n    metaReducer: () =\u003e {\n      return ASYNC_META.OK\n    }\n  },\n  error:{\n    callback: (dispatch, getState, ...args) =\u003e {\n    },\n    payloadReducer: (payload) =\u003e {\n      return payload\n    },\n    metaReducer: () =\u003e {\n      return ASYNC_META.ERROR\n    }\n  }\n}\n\nconst loginAction = createActionAsync('LOGIN', api, actionOptions);\n\n```\n## Who is using this library ?\n\nThis library has been extracted originally from [starhack.it](https://github.com/FredericHeem/starhackit), a React/Node Full Stack Starter Kit.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredericheem%2Fredux-act-async","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffredericheem%2Fredux-act-async","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffredericheem%2Fredux-act-async/lists"}