{"id":18416633,"url":"https://github.com/hk-labs/redux-http-request-middleware","last_synced_at":"2025-04-07T12:32:01.016Z","repository":{"id":29237622,"uuid":"116209693","full_name":"hk-labs/redux-http-request-middleware","owner":"hk-labs","description":"Transparently add the HTTP request ability to your redux actions.","archived":false,"fork":false,"pushed_at":"2023-01-04T01:20:19.000Z","size":755,"stargazers_count":4,"open_issues_count":14,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-22T18:12:01.813Z","etag":null,"topics":["http","middleware","react","redux","request"],"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/hk-labs.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":"2018-01-04T03:24:08.000Z","updated_at":"2021-04-29T18:32:42.000Z","dependencies_parsed_at":"2023-01-14T14:26:47.887Z","dependency_job_id":null,"html_url":"https://github.com/hk-labs/redux-http-request-middleware","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hk-labs%2Fredux-http-request-middleware","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hk-labs%2Fredux-http-request-middleware/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hk-labs%2Fredux-http-request-middleware/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hk-labs%2Fredux-http-request-middleware/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hk-labs","download_url":"https://codeload.github.com/hk-labs/redux-http-request-middleware/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247653137,"owners_count":20973770,"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":["http","middleware","react","redux","request"],"created_at":"2024-11-06T04:06:20.312Z","updated_at":"2025-04-07T12:31:56.005Z","avatar_url":"https://github.com/hk-labs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Redux Http Request Middleware\n\n[![Build Status](https://travis-ci.org/hk-labs/redux-http-request-middleware.svg?branch=master)](https://travis-ci.org/hk-labs/redux-http-request-middleware)\n[![npm version](https://badge.fury.io/js/redux-http-request-middleware.svg)](https://badge.fury.io/js/redux-http-request-middleware)\n[![dependencies Status](https://david-dm.org/hk-labs/redux-http-request-middleware/status.svg)](https://david-dm.org/hk-labs/redux-http-request-middleware)\n\nThe concept of this library is that you can define your own redux actions with any type and payload attaching the http request ability using the `HTTP_REQUEST` field.\n\nTechnically, when dispatching the action charged with `HTTP_REQUEST`, the middleware sends the http request eventually dispatching the response (success/failure) handler.\nAdditionally, dispatching this actions returns promises which makes it friendly with libs like [Redux Form](https://github.com/erikras/redux-form) and [Redux Saga](https://github.com/redux-saga/redux-saga) and makes possible the \"server-side rendering\".\n\n\n## Installation\n\nUsing NPM:\n\n```bash\n$ npm install redux-http-request-middleware --save\n```\n\nUsing Yarn:\n\n```bash\n$ yarn add redux-http-request-middleware\n```\n\n## Basic setup\n\nRegister the `httpRequestMiddleware` in your redux store configuration:\n\n_i.e. `src/index.js` or `src/redux/index.js`_\n\n```js\nimport { applyMiddleware, createStore } from 'redux';\nimport { httpRequestMiddleware } from 'redux-http-request-middleware';\n\nimport rootReducer from './reducers';\n\nconst httpRequestOptions = { // optional configuration\n  defaultHeaders: {\n    'Content-Type': 'application/json; charset=utf-8',\n    'Accept': 'application/json',\n    'X-Requested-With': 'XMLHttpRequest'\n  }\n};\n\nconst store = createStore(\n  rootReducer,\n  applyMiddleware(\n    httpRequestMiddleware(httpRequestOptions)\n  )\n);\n```\n\n## Usage example\n\nThe library keeps declarative programming style (as react/redux are), no callback hell, just define a pure actions.\n\n_i.e `src/redux/actions/auth.js`:_\n\n```js\nimport { HTTP_REQUEST, METHOD_POST } from 'redux-http-request-middleware';\n\n/**\n * Create the \"login\" action.\n */\nconst login = (email, password) =\u003e ({\n  type: 'LOGIN_REQUEST',\n  payload: { email, password }, // you can have any fields in your action, it's not required\n  [HTTP_REQUEST]: { // here we go!\n    path: '/api/login',\n    method: METHOD_POST, // or simply 'post'\n    body: { email, password }, // this will be sent as a json\n    handlers: {\n      success: (result) =\u003e ({ // the actions that will be dispatched on success response\n        type: 'LOGIN_SUCCESS',\n        payload: result\n      }),\n      failure: (error) =\u003e ({ // the action that will be dispatched if request failures\n        type: 'LOGIN_FAILURE',\n        message: `Error: ${error.message}`\n      })\n    }\n  }\n});\n```\n\nAnd then dispatch your actions from your components/sagas/etc...\n\n_i.e. `src/components/LoginForm.js`_\n\n```js\nimport React, {Component} from 'react';\nimport {connect} from 'react-redux';\n\nimport {login} from '../redux/actions/auth';\n\nexport class LoginForm extends Component {\n  ...\n\n  handleSubmit = () =\u003e {\n    const {email, password} = this.state;\n    const {dispatch} = this.props;\n    dispatch(login(email, password));\n  }\n\n  ...\n\n  render() {\n    ...\n  }\n}\n\nconst mapStateToProps = (state, props) =\u003e ({ ... });\n\nexport default connect(mapStateToProps)(LoginForm);\n```\n\n\n## Documentation\n\n\u003e todo...\n\n\n## API Reference\n\n\u003e todo...\n\n\n## Contributing\n\nFeel free to dive in! [Open an issue](https://github.com/hk-labs/redux-http-request-middleware/issues/new) or submit PRs.\n\n\n## Running tests\n\nUsing NPM:\n\n```bash\n$ npm test\n```\n\nUsing Yarn:\n\n```bash\n$ yarn test\n```\n\n\n## License\n\nLicensed under [MIT](LICENSE) © 2017-present Holy Krab Labs\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhk-labs%2Fredux-http-request-middleware","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhk-labs%2Fredux-http-request-middleware","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhk-labs%2Fredux-http-request-middleware/lists"}