{"id":19980129,"url":"https://github.com/kanefreeman/angular-redux-util","last_synced_at":"2026-05-06T00:06:58.387Z","repository":{"id":32973736,"uuid":"148375469","full_name":"KaneFreeman/angular-redux-util","owner":"KaneFreeman","description":"Angular Redux Util is a redux helper library for using Angular 6+ applications using @angular-redux","archived":false,"fork":false,"pushed_at":"2022-12-10T17:18:43.000Z","size":1808,"stargazers_count":0,"open_issues_count":23,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-02-12T15:54:01.973Z","etag":null,"topics":["angular","redux"],"latest_commit_sha":null,"homepage":"https://kanefreeman.github.io/angular-redux-util/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KaneFreeman.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-11T20:21:53.000Z","updated_at":"2019-09-23T17:46:02.000Z","dependencies_parsed_at":"2022-08-24T05:31:41.992Z","dependency_job_id":null,"html_url":"https://github.com/KaneFreeman/angular-redux-util","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaneFreeman%2Fangular-redux-util","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaneFreeman%2Fangular-redux-util/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaneFreeman%2Fangular-redux-util/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KaneFreeman%2Fangular-redux-util/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KaneFreeman","download_url":"https://codeload.github.com/KaneFreeman/angular-redux-util/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241413374,"owners_count":19959046,"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":["angular","redux"],"created_at":"2024-11-13T03:40:10.878Z","updated_at":"2026-05-06T00:06:58.370Z","avatar_url":"https://github.com/KaneFreeman.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# angular-redux-util\n![npm](https://img.shields.io/npm/v/angular-redux-util.svg) ![npm](https://img.shields.io/npm/v/angular-redux-util/next.svg) [![CircleCI](https://circleci.com/gh/KaneFreeman/angular-redux-util.svg?style=shield)](https://circleci.com/gh/KaneFreeman/angular-redux-util)\n\nAngular Redux Util is a helper library for using Angular 6+ applications with [Redux](https://redux.js.org/) (meant for use with [@angular-redux](https://angular-redux.github.io/store/index.html)) and [Redux Observable](https://redux-observable.js.org/). It contains a simplified Epic setup and built in generic Get and Post epics.\n\n## Table of Contents\n\n  * [Known Issues](#known-issues)\n  * [Requirements](#requirements)\n  * [Defining Redux Observable Epics](#defining-redux-observable-epics)\n    * [Before](#before)\n    * [After](#after)\n  * [Configuring Epics in Store](#configuring-epics-in-store)\n    * [Before](#before-1)\n    * [After](#after-1)\n  * [Redux Http Module](#redux-http-module)\n    * [Getting Started](#getting-started)\n    * [Get Action](#get-action)\n    * [Post Action](#post-action)\n    * [Example](#example)\n\n## Peer Dependencies\n\n|Module|Version|\n|---|---|\n|@angular/common|^6.0.0|\n|@angular/core|^6.0.0|\n|redux|^4.0.0|\n|redux-observable|^1.0.0|\n|redux-observable-util|^0.1.0|\n|rxjs|^6.0.0|\n\nMeant for use with [@angular-redux](https://angular-redux.github.io/store/index.html) ^9.0.0.\n\n## Defining Redux Observable Epics\n\nAngular Redux Util simplifies the setup for defining an epic, cleaning up the code for readability.\n\n### Before\n```typescript\nsomethingEpic = (action$, state$) =\u003e\n  action$.pipe(\n    ofType(SOMETHING),\n    switchMap(() =\u003e\n      this.httpClient.get\u003cany\u003e('/something').toPromise()\n        .then(response =\u003e of({ type: SUCCESS, response }))\n        .catch(error =\u003e of({ type: ERROR, response }));\n    )\n  );\n```\n\n### After\n\n```typescript\n@Epic(SOMETHING)\nsomethingEpic(action: AnyAction, state$) {\n  this.httpClient.get\u003cany\u003e('/something').toPromise()\n    .then(response =\u003e { type: SUCCESS, response })\n    .catch(error =\u003e { type: ERROR, response });\n}\n```\n\n### Configuring Epics in Store\n\nConfiguration of the epics is also simplified compared to the standard setup of Redux Observable. You call the generateEpics instead of combineEpics, and pass the services that contain @Epic decorators.\n\n### Before\n\n```typescript\nconst epicMiddleware = createEpicMiddleware();\nthis.ngRedux.configureStore(rootReducer, APP_INITIAL_STATE, epicMiddleware);\nepicMiddleware.run(combineEpics(service.epic1, service.epic2));\n```\n\n### After\n\n```typescript\nconst epicMiddleware = createEpicMiddleware();\nthis.ngRedux.configureStore(rootReducer, APP_INITIAL_STATE, epicMiddleware);\nepicMiddleware.run(generateEpics(service));\n```\n\n## Redux Http Module\n\nThe Redux Http Module provide Get and Post epics ready out of the box. They take a specific payload, handle all of the http interactions, and return the results. You must provide a URL, success action (and body for POST). The error action and headers are optional. If no error action is provided, it will automatically use `GENERIC_ERROR`.\n\n### Getting Started\n\nTo get started, we need to setup the Get and Post epics into the store:\n\n```typescript\nconst epicMiddleware = createEpicMiddleware();\n\n// Configure @angular-redux\nthis.ngRedux.configureStore(\n  rootReducer,\n  APP_INITIAL_STATE,\n  [\n    ...middleware,\n    epicMiddleware\n  ],\n  [ ...enhancers, devTool.isEnabled() ? devTool.enhancer() : f =\u003e f]);\n\nepicMiddleware.run(\n  generateEpics(reduxHttpService)\n);\n```\n\n### Actions\n\n#### Base Http Action\n```typescript\nexport class ReduxHttpAction {\n  url: string;\n  successAction: string;\n  errorAction?: string;\n  payload?: any;\n\n  options?: ReduxHttpOptions;\n}\n```\n\n#### Options\n```typescript\nexport class ReduxHttpOptions {\n  headers?: HttpHeaders | {[header: string]: string | string[]};\n  reportProgress?: boolean;\n  responseType?: 'json';\n  withCredentials?: boolean;\n}\n```\n\n#### Http Action With Body\n```typescript\nexport class ReduxHttpBodyAction extends ReduxHttpAction {\n  body: any|null;\n}\n```\n\n### Get Action\n* **Type**: `REDUX_GET`\n* **Action Format**: `ReduxHttpAction`\n\n#### Example\n\n```typescript\ngetData(): void {\n  const action: ReduxGetAction = {\n    type: REDUX_GET\n    url: 'assets/data.json',\n    successAction: ExampleReduxActions.GET_DATA_SUCCESS\n  };\n\n  this.ngRedux.dispatch(action);\n}\n```\n\n### Post Action\n* **Type**: `REDUX_POST`\n* **Action Format**: `ReduxHttpBodyAction`\n\n### Patch Action\n* **Type**: `REDUX_PATCH`\n* **Action Format**: `ReduxHttpBodyAction`\n\n### Put Action\n* **Type**: `REDUX_PUT`\n* **Action Format**: `ReduxHttpBodyAction`\n\n### Delete Action\n* **Type**: `REDUX_DELETE`\n* **Action Format**: `ReduxHttpAction`\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanefreeman%2Fangular-redux-util","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkanefreeman%2Fangular-redux-util","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkanefreeman%2Fangular-redux-util/lists"}