feat(example): add examples of effects not based on the Actions stream by adrianfaciu · Pull Request #1845 · ngrx/platform

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

@@ -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

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


Combine the 2 maps into 1

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

+          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

@@ -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

+
+  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

+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

		@@ -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

Uh oh!

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

Uh oh!

adrianfaciu commented May 9, 2019

Uh oh!

ngrxbot commented May 9, 2019

Uh oh!

timdeschryver left a comment

Choose a reason for hiding this comment

Uh oh!

timdeschryver commented May 13, 2019

Uh oh!

timdeschryver commented May 13, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

adrianfaciu commented May 15, 2019

Uh oh!

ngrxbot commented May 15, 2019

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ngrxbot commented May 20, 2019

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants