feat(example): add examples of effects not based on the Actions stream #1845

adrianfaciu · 2019-05-09T07:41:34Z

As suggested, added two examples of effects not based on Actions stream:

listen for router navigation events and update the page title
log out the user after a specified period of inactivity

Closes #1830

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines: https://github.com/ngrx/platform/blob/master/CONTRIBUTING.md#commit
Tests for the changes have been added (for bug fixes/features)
Documentation has been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[ ] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

Closes #1830

What is the new behavior?

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

adrianfaciu · 2019-05-09T07:42:13Z

When you have time, let me know if this is close to what you had in mind :)

ngrxbot · 2019-05-09T07:53:14Z

Preview docs changes for 199a37e at https://previews.ngrx.io/pr1845-199a37e/

timdeschryver

LGTM 👍
Should we create some tests for these changes?

timdeschryver · 2019-05-13T17:42:27Z

Another idea that pops to my mind would be to use google analytics.
We could NgRx-ify Stephen's post https://fluin.io/blog/google-analytics-with-tag-manager-and-angular

timdeschryver · 2019-05-13T17:48:16Z

An example that still uses the actions but are not dispatching an action back to the store:
Showing a snackbar when a book has been added/removed.

brandonroberts · 2019-05-13T18:17:09Z

projects/example-app/src/app/core/actions/user.actions.ts

@@ -0,0 +1,3 @@
+import { createAction } from '@ngrx/store';
+
+export const idle = createAction('[User] Idle');


Suggested change

export const idle = createAction('[User] Idle');

export const idleTimeout = createAction('[User] Idle Timeout');

brandonroberts · 2019-05-13T18:18:35Z

projects/example-app/src/app/core/effects/router.effects.ts

+    () =>
+      this.router.events.pipe(
+        filter(event => event instanceof NavigationEnd),
+        map(() => this.activatedRoute),


Combine the 2 maps into 1

brandonroberts · 2019-05-13T18:20:53Z

projects/example-app/src/app/core/effects/router.effects.ts

+          return route;
+        }),
+        mergeMap(route => route.data),
+        map(data => data['title']),


Suggested change

map(data => data['title']),

map(data => `Book Collection - ${data['title'])}`,

brandonroberts · 2019-05-13T18:22:25Z

projects/example-app/src/app/core/effects/router.effects.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { createEffect } from '@ngrx/effects';
+import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';


Move all @angular imports to the top of the file, following by rxjs and @ngrx

brandonroberts · 2019-05-13T18:25:04Z

projects/example-app/src/app/core/effects/user.effects.ts

+
+  idle$ = createEffect(() =>
+    merge(this.clicks$, this.keys$, this.mouse$).pipe(
+      switchMapTo(timer(60 * 1000)),


Suggested change

switchMapTo(timer(60 * 1000)),

switchMapTo(timer(5 * 60 * 1000)), // 5 minute inactivity timeout

As suggested, added two examples of effects not based on Actions stream: - listen for router navigation events and update page title - log out the user after a specified period of inactivity Closes ngrx#1830

adrianfaciu · 2019-05-15T05:55:24Z

Updated with all the requested changes and added tests for user and router effects.
If we need more examples, I can add some effects for the snackbar and look into google analytics.

ngrxbot · 2019-05-15T05:59:29Z

Preview docs changes for 38784a9 at https://previews.ngrx.io/pr1845-38784a9/

alex-okrushko · 2019-05-15T18:16:11Z

projects/example-app/src/app/core/effects/router.effects.ts

+export class RouterEffects {
+  updateTitle$ = createEffect(
+    () =>
+      this.router.events.pipe(


We have store-router package installed in the example app. Wouldn't that be better to listen to those changes?
@brandonroberts

I thought about that when I was writing the code :) The idea was to show how one would create effects not based on the Actions stream, so I went for this instead.

I think these are good for what we asked for

ngrxbot · 2019-05-20T20:01:09Z

Preview docs changes for 524c21e at https://previews.ngrx.io/pr1845-524c21e/

timdeschryver approved these changes May 13, 2019

View reviewed changes

brandonroberts requested changes May 13, 2019

View reviewed changes

feat(example): add examples of effects not based on the Actions stream

38784a9

As suggested, added two examples of effects not based on Actions stream: - listen for router navigation events and update page title - log out the user after a specified period of inactivity Closes ngrx#1830

adrianfaciu force-pushed the example/non-actions-effects branch from 199a37e to 38784a9 Compare May 15, 2019 05:51

brandonroberts approved these changes May 15, 2019

View reviewed changes

alex-okrushko reviewed May 15, 2019

View reviewed changes

Merge branch 'master' into example/non-actions-effects

524c21e

brandonroberts merged commit 3454e70 into ngrx:master May 21, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(example): add examples of effects not based on the Actions stream #1845

feat(example): add examples of effects not based on the Actions stream #1845

adrianfaciu commented May 9, 2019

adrianfaciu commented May 9, 2019

ngrxbot commented May 9, 2019

timdeschryver left a comment

timdeschryver commented May 13, 2019

timdeschryver commented May 13, 2019

brandonroberts May 13, 2019

brandonroberts May 13, 2019

brandonroberts May 13, 2019

brandonroberts May 13, 2019

brandonroberts May 13, 2019

adrianfaciu commented May 15, 2019

ngrxbot commented May 15, 2019

alex-okrushko May 15, 2019

adrianfaciu May 15, 2019

brandonroberts May 20, 2019

ngrxbot commented May 20, 2019

		@@ -0,0 +1,3 @@
		import { createAction } from '@ngrx/store';

		export const idle = createAction('[User] Idle');

	export const idle = createAction('[User] Idle');
	export const idleTimeout = createAction('[User] Idle Timeout');

	map(data => data['title']),
	map(data => `Book Collection - ${data['title'])}`,

	switchMapTo(timer(60 * 1000)),
	switchMapTo(timer(5 * 60 * 1000)), // 5 minute inactivity timeout

feat(example): add examples of effects not based on the Actions stream #1845

feat(example): add examples of effects not based on the Actions stream #1845

Conversation

adrianfaciu commented May 9, 2019

PR Checklist

PR Type

What is the current behavior?

What is the new behavior?

Does this PR introduce a breaking change?

Other information

adrianfaciu commented May 9, 2019

ngrxbot commented May 9, 2019

timdeschryver left a comment

Choose a reason for hiding this comment

timdeschryver commented May 13, 2019

timdeschryver commented May 13, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adrianfaciu commented May 15, 2019

ngrxbot commented May 15, 2019

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ngrxbot commented May 20, 2019