Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@ngrx/effects

Package Overview
Dependencies
Maintainers
3
Versions
144
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ngrx/effects - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

esm/ng2.d.ts
esm/ng2.js
ng2.d.ts
ng2.js

3

effects.d.ts
import 'rxjs/add/observable/merge';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { OpaqueToken, Provider } from '@angular/core';
export declare const BOOTSTRAP_EFFECTS: OpaqueToken;
export declare function mergeEffects(...instances: any[]): Observable<any>;
export declare function connectEffectsToStore(store: Store<any>, effects: any[]): () => Promise<boolean>;
export declare const CONNECT_EFFECTS_PROVIDER: Provider;

15

effects.js
"use strict";
require('rxjs/add/observable/merge');
var store_1 = require('@ngrx/store');
var Observable_1 = require('rxjs/Observable');
var core_1 = require('@angular/core');
var metadata_1 = require('./metadata');
var util_1 = require('./util');
exports.BOOTSTRAP_EFFECTS = new core_1.OpaqueToken('@ngrx/effects Bootstrap Effects');
function mergeEffects() {

@@ -14,3 +11,8 @@ var instances = [];

}
var observables = util_1.flatten(instances).map(function (i) { return metadata_1.getEffectKeys(i).map(function (key) { return i[key]; }); });
var observables = util_1.flatten(instances).map(function (i) { return metadata_1.getEffectKeys(i).map(function (key) {
if (typeof i[key] === 'function') {
return i[key]();
}
return i[key];
}); });
return Observable_1.Observable.merge.apply(Observable_1.Observable, util_1.flatten(observables));

@@ -26,6 +28,1 @@ }

exports.connectEffectsToStore = connectEffectsToStore;
exports.CONNECT_EFFECTS_PROVIDER = new core_1.Provider(core_1.APP_INITIALIZER, {
multi: true,
deps: [store_1.Store, exports.BOOTSTRAP_EFFECTS],
useFactory: connectEffectsToStore
});

3

esm/effects.d.ts
import 'rxjs/add/observable/merge';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { OpaqueToken, Provider } from '@angular/core';
export declare const BOOTSTRAP_EFFECTS: OpaqueToken;
export declare function mergeEffects(...instances: any[]): Observable<any>;
export declare function connectEffectsToStore(store: Store<any>, effects: any[]): () => Promise<boolean>;
export declare const CONNECT_EFFECTS_PROVIDER: Provider;

15

esm/effects.js
import 'rxjs/add/observable/merge';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs/Observable';
import { OpaqueToken, APP_INITIALIZER, Provider } from '@angular/core';
import { getEffectKeys } from './metadata';
import { flatten } from './util';
export const BOOTSTRAP_EFFECTS = new OpaqueToken('@ngrx/effects Bootstrap Effects');
export function mergeEffects(...instances) {
const observables = flatten(instances).map(i => getEffectKeys(i).map(key => i[key]));
const observables = flatten(instances).map((i) => getEffectKeys(i).map((key) => {
if (typeof i[key] === 'function') {
return i[key]();
}
return i[key];
}));
return Observable.merge(...flatten(observables));

@@ -18,6 +20,1 @@ }

}
export const CONNECT_EFFECTS_PROVIDER = new Provider(APP_INITIALIZER, {
multi: true,
deps: [Store, BOOTSTRAP_EFFECTS],
useFactory: connectEffectsToStore
});

2

esm/index.d.ts
export { Effect } from './metadata';
export { mergeEffects } from './effects';
export { runEffects } from './run-effects';
export { runEffects } from './ng2';
export { StateUpdate, StateUpdates } from './state-updates';
export { toPayload, all } from './util';

2

esm/index.js
export { Effect } from './metadata';
export { mergeEffects } from './effects';
export { runEffects } from './run-effects';
export { runEffects } from './ng2';
export { StateUpdates } from './state-updates';
export { toPayload, all } from './util';

2

esm/state-updates.d.ts
import { Observable } from 'rxjs/Observable';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { Action, Dispatcher, State } from '@ngrx/store';
import { Provider } from '@angular/core';
export interface StateUpdate<S> {

@@ -16,2 +15,1 @@ state: S;

}
export declare const STATE_UPDATES_PROVIDER: Provider;

22

esm/state-updates.js

@@ -1,16 +0,5 @@

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
import { withLatestFrom } from 'rxjs/operator/withLatestFrom';
import { filter } from 'rxjs/operator/filter';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { Dispatcher, State } from '@ngrx/store';
import { Injectable, Provider } from '@angular/core';
export let StateUpdates = class StateUpdates extends ReplaySubject {
export class StateUpdates extends ReplaySubject {
constructor(actions$, state$) {

@@ -30,9 +19,2 @@ super(1);

}
};
StateUpdates = __decorate([
Injectable(),
__metadata('design:paramtypes', [Dispatcher, State])
], StateUpdates);
export const STATE_UPDATES_PROVIDER = new Provider(StateUpdates, {
useClass: StateUpdates
});
}

2

index.d.ts
export { Effect } from './metadata';
export { mergeEffects } from './effects';
export { runEffects } from './run-effects';
export { runEffects } from './ng2';
export { StateUpdate, StateUpdates } from './state-updates';
export { toPayload, all } from './util';

4

index.js

@@ -6,4 +6,4 @@ "use strict";

exports.mergeEffects = effects_1.mergeEffects;
var run_effects_1 = require('./run-effects');
exports.runEffects = run_effects_1.runEffects;
var ng2_1 = require('./ng2');
exports.runEffects = ng2_1.runEffects;
var state_updates_1 = require('./state-updates');

@@ -10,0 +10,0 @@ exports.StateUpdates = state_updates_1.StateUpdates;

2

package.json
{
"name": "@ngrx/effects",
"version": "1.0.1",
"version": "1.1.0",
"description": "Side effect model for @ngrx/store",

@@ -5,0 +5,0 @@ "main": "index.js",

77

README.md

@@ -10,35 +10,42 @@ # @ngrx/effects

```
### Example Application
https://github.com/ngrx/example-app
## Effects
In @ngrx/effects, effects are simply _sources of actions_. You use the `@Effect()` decorator to hint which observables on a service are action sources, and @ngrx/effects automatically connects your action sources to your store
In @ngrx/effects, effects are _sources of actions_. You use the `@Effect()` decorator to hint which observables on a service are action sources, and @ngrx/effects automatically connects your action sources to your store
To help you compose new action sources, @ngrx/effects exports a `StateUpdates` observable service that emits every time your state updates along with the action that caused the state update. Note that even if there are no changes in your state, every action will cause state to update.
To help you compose new action sources, @ngrx/effects exports a `StateUpdates` observable service that emits a `StateUpdate` object, containing the current state and dispatched action, for each state update.
For example, here's an AuthEffects service that describes a source of login actions:
```ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Action } from '@ngrx/store';
import { StateUpdates, Effect } from '@ngrx/effects'
__*Note: Even if there are no changes in your state, every action will cause state to update!*__
@Injectable()
export class AuthEffects {
constructor(private http: Http, private updates$: StateUpdates) { }
@Effect() login$ = this.updates$
// Listen for the 'LOGIN' action
.whenAction('LOGIN')
// Map the payload into JSON to use as the request body
.map(update => JSON.stringify(update.action.payload))
.switchMap(payload => this.http.post('/auth', payload)
// If successful, dispatch success action with result
.map(res => ({ type: 'LOGIN_SUCCESS', payload: res.json() }))
// If request fails, dispatch failed action
.catch(() => Observable.of({ type: 'LOGIN_FAILED' }));
);
}
```
### Example
1. Create an AuthEffects service that describes a source of login actions:
```ts
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Action } from '@ngrx/store';
import { StateUpdates, Effect } from '@ngrx/effects'
Then you run your effects during bootstrap:
```ts
@Injectable()
export class AuthEffects {
constructor(private http: Http, private updates$: StateUpdates<any>) { }
@Effect() login$ = this.updates$
// Listen for the 'LOGIN' action
.whenAction('LOGIN')
// Map the payload into JSON to use as the request body
.map(update => JSON.stringify(update.action.payload))
.switchMap(payload => this.http.post('/auth', payload)
// If successful, dispatch success action with result
.map(res => ({ type: 'LOGIN_SUCCESS', payload: res.json() }))
// If request fails, dispatch failed action
.catch(() => Observable.of({ type: 'LOGIN_FAILED' }));
);
}
```
2. Run your effects during application bootstrap:
```ts
import { runEffects } from '@ngrx/effects';

@@ -54,3 +61,3 @@

The `@Effect()` provides metadata to hint which observables on a class should be connected to `Store`. If you want to dynamically run an effect, simply inject the effect class and subscribe the effect to `Store` manually:
The `@Effect()` decorator provides metadata to hint which observables on a class should be connected to `Store`. If you want to dynamically run an effect inject the effect class and subscribe the effect to `Store` manually:

@@ -80,3 +87,3 @@ ```ts

To stop the effect, simply unsubscribe:
Unsubscribe to stop the effect:
```ts

@@ -89,3 +96,3 @@ ngOnDestroy() {

#### Starting Multiple Effects
If you don't want to connect each source manually, you can use the simple `mergeEffects()` helper function to automatically merge all decorated effects across any number of effect services:
If you don't want to connect each source manually, you can use the `mergeEffects()` helper function to automatically merge all decorated effects across any number of effect services:

@@ -100,5 +107,5 @@ ```ts

providers: [
provide(EFFECTS, { useClass: AuthEffects }),
provide(EFFECTS, { useClass: AccountEffects }),
provide(EFFECTS, { useClass: UserEffects })
provide(EFFECTS, { multi: true, useClass: AuthEffects }),
provide(EFFECTS, { multi: true, useClass: AccountEffects }),
provide(EFFECTS, { multi: true, useClass: UserEffects })
]

@@ -115,3 +122,3 @@ })

### Testing Effects
To test your effects, simply mock out your effect's dependencies and use the `MockStateUpdates` service to send actions and state changes to your effect:
To test your effects mock out your effect's dependencies and use the `MockStateUpdates` service to send actions and state changes to your effect:

@@ -162,2 +169,3 @@ ```ts

```ts
// ... other needed imports here ...
import { createSaga, whenAction, toPayload } from 'store-saga';

@@ -186,2 +194,3 @@

```ts
// ... other needed imports here ...
import { Effect, toPayload, StateUpdates } from '@ngrx/effects';

@@ -196,3 +205,3 @@

.map(update => JSON.stringify(update.action.payload))
.mergeMap(body => http.post('/auth', body)
.mergeMap(body => this.http.post('/auth', body)
.map(res => ({

@@ -199,0 +208,0 @@ type: 'LOGIN_SUCCESS',

2

state-updates.d.ts
import { Observable } from 'rxjs/Observable';
import { ReplaySubject } from 'rxjs/ReplaySubject';
import { Action, Dispatcher, State } from '@ngrx/store';
import { Provider } from '@angular/core';
export interface StateUpdate<S> {

@@ -16,2 +15,1 @@ state: S;

}
export declare const STATE_UPDATES_PROVIDER: Provider;

18

state-updates.js

@@ -7,16 +7,5 @@ "use strict";

};
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var withLatestFrom_1 = require('rxjs/operator/withLatestFrom');
var filter_1 = require('rxjs/operator/filter');
var ReplaySubject_1 = require('rxjs/ReplaySubject');
var store_1 = require('@ngrx/store');
var core_1 = require('@angular/core');
var StateUpdates = (function (_super) {

@@ -47,11 +36,4 @@ __extends(StateUpdates, _super);

};
StateUpdates = __decorate([
core_1.Injectable(),
__metadata('design:paramtypes', [store_1.Dispatcher, store_1.State])
], StateUpdates);
return StateUpdates;
}(ReplaySubject_1.ReplaySubject));
exports.StateUpdates = StateUpdates;
exports.STATE_UPDATES_PROVIDER = new core_1.Provider(StateUpdates, {
useClass: StateUpdates
});
esm/run-effects.d.ts
esm/run-effects.js
run-effects.d.ts
run-effects.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc