https://github.com/angular-redux/redux-observable-decorator

Decorators for Redux Observable
https://github.com/angular-redux/redux-observable-decorator

observable redux redux-observable rxjs

Last synced: 3 months ago
JSON representation

Decorators for Redux Observable

• Host: GitHub
• URL: https://github.com/angular-redux/redux-observable-decorator
• Owner: angular-redux
• License: mit
• Created: 2016-12-21T02:01:10.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-01-16T04:21:39.000Z (about 6 years ago)
• Last Synced: 2024-09-21T20:39:40.857Z (5 months ago)
• Topics: observable, redux, redux-observable, rxjs
• Language: TypeScript
• Size: 139 KB
• Stars: 13
• Watchers: 4
• Forks: 9
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.MD
  • License: LICENSE

Awesome Lists containing this project

README

        
[![CircleCI](https://circleci.com/gh/angular-redux/redux-observable-decorator/tree/master.svg?style=svg)](https://circleci.com/gh/angular-redux/redux-observable-decorator/tree/master)

[![npm version](https://img.shields.io/npm/v/redux-observable-decorator.svg)](https://www.npmjs.com/package/redux-observable-decorator)

[![npm downloads](https://img.shields.io/npm/dt/redux-observable-decorator.svg)](https://www.npmjs.com/package/redux-observable-decorator)

# redux-observable-decorator

Decorators for Redux Observable

When using Redux with Angular with __angular-redux/store__ and __redux-observable__, it's common to create your epics as an injectable class, and when configuring the store - creating an epic middleware for each one, or using `combineEpics`:

```ts

@Injectable()

export class SomeEpics {

	epicOne = (action$) => action$.ofType('PING').pipe(mapTo({type: 'PONG'}));

	epicTwo = (action$) => action$.ofType('ACTION_IN').pipe(mapTo({type: 'ACTION_OUT'}));

}

@NgModule({

})

export class AppModule {

	constructor(ngRedux: NgRedux, someEpics: SomeEpics) {

		let epics = combineEpics(

			someEpics.epicOne,

			someEpics.epicTwo

		);

		let epicMiddleware = createEpicMidleware();

		ngRedux.configureStore(reducer,[epicMiddleware]);

		epicMiddleware.run(epics);

		// or

		let epicOne = createMiddleware(someEpics.epicOne);

		let epicTwo = createMiddleware(someEpics.epicTwo);

		ngRedux.configureStore(reducer,[epicOne, epicTwo]);

	}

}

```

This decorator is intended to make it easier to mark which properties / methods in a class are Epics to simplify creating the epic middleware for your application.

```ts

import { Epic } from 'redux-observable-decorator';

@Injectable()

export class SomeEpics {

	@Epic() epicOne = (action$) => action$.ofType('PING').pipe(mapTo({type: 'PONG'}));

	@Epic() epicTwo = (action$) => action$.ofType('ACTION_IN').pipe(mapTo({type: 'ACTION_OUT'}));

}

```

```ts

import { combineDecoratedEpics } from 'redux-observable-decorator';

import { createEpicMiddleware } from 'redux-observable';

@NgModule({

})

export class AppModule {

	constructor(ngRedux:NgRedux, someEpics:SomeEpics) {

		let epics = combineDecoratedEpics(someEpics);

		const epicMiddleware = createEpicMiddleware();

		ngRedux.configureStore(reducer,[epicMiddleware]);

		epicMiddleware.run(epics);

	}

}

```

This can be used with vanilla redux also - as seen in the unit tests...

```ts

class Test {

	@Epic() epic = (action$) => action$.ofType('TEST_IN').pipe(mapTo({ type: 'TEST_OUT' }));

}

const reducer = (state = [], action) => state.concat(action);

const epics = new Test();

const epicMiddleware = createEpicMiddleware(epics);

const store = createStore(reducer, applyMiddleware(epicMiddleware));

epicMiddleware.run(combineDecoratedEpics(epics));

```

# Inspiration

The `@Effect` decorator from [ngrx/effects](https://github.com/ngrx/effects)

# Todo

* [ ] Better docs

* [ ] Publish on NPM

* [ ] Improve tests

* [ ] Get test coverage working

* [ ] Some Anglar 2 / integration tests

* [ ] Example App

* [ ] Strategy for lazy loading epics (to support code-splitting)?