Skip to content

Commit f219b83

Browse files
SethDavenportSethDavenport
authored
Update example to store 6.3.0 (#30)
* Update example to store 6.3.0 Shows use of `@dispatch` and `@select$` * fix unit test
1 parent a7d7389 commit f219b83

File tree

8 files changed

+42
-54
lines changed

8 files changed

+42
-54
lines changed

‎package.json‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515
},
1616
"private": true,
1717
"dependencies": {
18-
"@angular-redux/form": "^6.2.0",
19-
"@angular-redux/router": "^6.2.0",
20-
"@angular-redux/store": "^6.2.0",
18+
"@angular-redux/form": "^6.3.0",
19+
"@angular-redux/router": "^6.3.0",
20+
"@angular-redux/store": "^6.3.0",
2121
"@angular/common": "^4.1.0",
2222
"@angular/compiler": "^4.1.0",
2323
"@angular/core": "^4.1.0",

‎src/app/animals/animal.actions.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Injectable } from '@angular/core';
2+
import { dispatch } from '@angular-redux/store';
23
import { Action } from 'redux';
34

45
@Injectable()
@@ -7,6 +8,7 @@ export class AnimalActions {
78
static readonly LOAD_SUCCEEDED = 'LOAD_SUCCEEDED';
89
static readonly LOAD_FAILED = 'LOAD_FAILED';
910

11+
@dispatch()
1012
loadAnimals(animalType) {
1113
return {
1214
type: AnimalActions.LOAD_STARTED,

‎src/app/elephants/elephant-page.container.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,7 @@ export class ElephantPageComponent {
3131
@select(['elephants', 'loading']) readonly loading$: Observable<boolean>;
3232
@select(['elephants', 'error']) readonly error$: Observable<any>;
3333

34-
constructor(
35-
ngRedux: NgRedux<IAppState>,
36-
actions: AnimalActions) {
37-
ngRedux.dispatch(actions.loadAnimals(ANIMAL_TYPES.ELEPHANT));
34+
constructor(actions: AnimalActions) {
35+
actions.loadAnimals(ANIMAL_TYPES.ELEPHANT);
3836
}
3937
}

‎src/app/feedback/feedback-form/feedback-form.component.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h2>Feedback Form</h2>
2828
<label for="comments">Comments:
2929
<textarea
3030
name="comments"
31-
[maxLength]="MAX_COMMENT_CHARS"
31+
[maxLength]="getMaxCommentChars()"
3232
ngControl
3333
ngModel></textarea>
3434
<p>{{ charsLeft$ | async }} characters remaining.

‎src/app/feedback/feedback-form/feedback-form.component.ts‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
import { Component, ChangeDetectionStrategy } from '@angular/core';
22
import { Connect } from '@angular-redux/form';
3-
import { NgRedux, select } from '@angular-redux/store';
3+
import { NgRedux, select$ } from '@angular-redux/store';
44
import { Observable } from 'rxjs/Observable';
55
import { of } from 'rxjs/observable/of';
66
import { IAppState } from '../../store/root.types';
77

8+
const MAX_COMMENT_CHARS = 300;
9+
10+
export const charsLeft = (obs$: Observable<string>): Observable<number> =>
11+
obs$.map(comments => comments || '')
12+
.map(comments => MAX_COMMENT_CHARS - comments.length);
13+
814
@Component({
915
selector: 'zoo-feedback-form',
1016
templateUrl: './feedback-form.component.html',
1117
styleUrls: [ './feedback-form.component.css' ],
1218
changeDetection: ChangeDetectionStrategy.OnPush,
1319
})
1420
export class FeedbackFormComponent {
15-
readonly MAX_COMMENT_CHARS = 300;
16-
readonly charsLeft$: Observable<number>;
21+
@select$(['feedback', 'comments'], charsLeft) readonly charsLeft$: Observable<number>;
1722

18-
constructor(store: NgRedux<IAppState>) {
19-
this.charsLeft$ = store.select<string>(['feedback', 'comments'])
20-
.map(comments => comments || '')
21-
.map(comments => this.MAX_COMMENT_CHARS - comments.length);
22-
}
23+
getMaxCommentChars = () => MAX_COMMENT_CHARS;
2324
}

‎src/app/feedback/feedback-form/feedback-form.spec.ts‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,11 @@ describe('Feedback Form Component', () => {
2424
const form = fixture.debugElement.componentInstance;
2525

2626
const expectedCharsLeftSequence = [
27-
form.MAX_COMMENT_CHARS - 1,
28-
form.MAX_COMMENT_CHARS - 2,
29-
form.MAX_COMMENT_CHARS - 3,
30-
form.MAX_COMMENT_CHARS - 4,
31-
form.MAX_COMMENT_CHARS - 5,
27+
form.getMaxCommentChars() - 1,
28+
form.getMaxCommentChars() - 2,
29+
form.getMaxCommentChars() - 3,
30+
form.getMaxCommentChars() - 4,
31+
form.getMaxCommentChars() - 5,
3232
];
3333

3434
const feedbackCommentsStub = MockNgRedux.getSelectorStub(['feedback', 'comments']);

‎src/app/lions/lion-page.container.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,7 @@ export class LionPageComponent {
3131
@select(['lions', 'loading']) readonly loading$: Observable<boolean>;
3232
@select(['lions', 'error']) readonly error$: Observable<any>;
3333

34-
constructor(
35-
store: NgRedux<IAppState>,
36-
actions: AnimalActions) {
37-
store.dispatch(actions.loadAnimals(ANIMAL_TYPES.LION));
34+
constructor(actions: AnimalActions) {
35+
actions.loadAnimals(ANIMAL_TYPES.LION);
3836
}
3937
}

‎yarn.lock‎

Lines changed: 18 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
# yarn lockfile v1
33

44

5-
"@angular-redux/form@^6.2.0":
6-
version "6.2.0"
7-
resolved "https://registry.yarnpkg.com/@angular-redux/form/-/form-6.%3Cspan%20class="x x-first x-last">2.0.tgz#888ee96bd9adb1aa131d31de0c932876e76b4343"
5+
"@angular-redux/form@^6.3.0":
6+
version "6.3.0"
7+
resolved "https://registry.yarnpkg.com/@angular-redux/form/-/form-6.%3Cspan%20class="x x-first x-last">3.0.tgz#04d97a95da93cb69c852406ffbb8a5c633712977"
88
dependencies:
99
immutable "^3.8.1"
1010

11-
"@angular-redux/router@^6.2.0":
12-
version "6.2.0"
13-
resolved "https://registry.yarnpkg.com/@angular-redux/router/-/router-6.%3Cspan%20class="x x-first x-last">2.0.tgz#d5a2f4e0cd966670aa7131524e7f20c665e52c77"
11+
"@angular-redux/router@^6.3.0":
12+
version "6.3.0"
13+
resolved "https://registry.yarnpkg.com/@angular-redux/router/-/router-6.%3Cspan%20class="x x-first x-last">3.0.tgz#0ece17ad5a4eb8a40f54d7e3a67e67598f03d2cd"
1414

15-
"@angular-redux/store@^6.2.0":
16-
version "6.2.0"
17-
resolved "https://registry.yarnpkg.com/@angular-redux/store/-/store-6.%3Cspan%20class="x x-first x-last">2.0.tgz#e0289d6fc9134523468c27c62e88576fc1ccd725"
15+
"@angular-redux/store@^6.3.0":
16+
version "6.3.0"
17+
resolved "https://registry.yarnpkg.com/@angular-redux/store/-/store-6.%3Cspan%20class="x x-first x-last">3.0.tgz#1c5cb08073fc04645dda6291e7410a981cd1fb37"
1818

1919
"@angular/[email protected]":
2020
version "1.0.1"
@@ -1189,12 +1189,18 @@ date-now@^0.1.4:
11891189
version "0.1.4"
11901190
resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"
11911191

1192-
debug@*, debug@2, debug@2.6.1, debug@^2.1.3, debug@^2.2.0:
1192+
debug@*, [email protected], debug@^2.1.3, debug@^2.2.0:
11931193
version "2.6.1"
11941194
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.1.tgz#79855090ba2c4e3115cc7d8769491d58f0491351"
11951195
dependencies:
11961196
ms "0.7.2"
11971197

1198+
debug@2, [email protected], debug@^2.6.3:
1199+
version "2.6.3"
1200+
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.3.tgz#0f7eb8c30965ec08c72accfa0130c8b79984141d"
1201+
dependencies:
1202+
ms "0.7.2"
1203+
11981204
[email protected], debug@~2.2.0:
11991205
version "2.2.0"
12001206
resolved "https://registry.yarnpkg.com/debug/-/debug-2.2.0.tgz#f87057e995b1a1f6ae6a4960664137bc56f039da"
@@ -1207,12 +1213,6 @@ [email protected]:
12071213
dependencies:
12081214
ms "0.7.2"
12091215

1210-
[email protected], debug@^2.6.3:
1211-
version "2.6.3"
1212-
resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.3.tgz#0f7eb8c30965ec08c72accfa0130c8b79984141d"
1213-
dependencies:
1214-
ms "0.7.2"
1215-
12161216
decamelize@^1.0.0, decamelize@^1.1.1, decamelize@^1.1.2:
12171217
version "1.2.0"
12181218
resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
@@ -2416,11 +2416,7 @@ istanbul-instrumenter-loader@^2.0.0:
24162416
loader-utils "^0.2.16"
24172417
object-assign "^4.1.0"
24182418

2419-
istanbul-lib-coverage@^1.0.0:
2420-
version "1.0.1"
2421-
resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.0.1.tgz#f263efb519c051c5f1f3343034fc40e7b43ff212"
2422-
2423-
istanbul-lib-coverage@^1.1.0:
2419+
istanbul-lib-coverage@^1.0.0, istanbul-lib-coverage@^1.1.0:
24242420
version "1.1.0"
24252421
resolved "https://registry.yarnpkg.com/istanbul-lib-coverage/-/istanbul-lib-coverage-1.1.0.tgz#caca19decaef3525b5d6331d701f3f3b7ad48528"
24262422

@@ -5072,20 +5068,13 @@ wrappy@1:
50725068
version "1.0.2"
50735069
resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
50745070

5075-
[email protected]:
5071+
[email protected], ws@^1.0.1:
50765072
version "1.1.2"
50775073
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.2.tgz#8a244fa052401e08c9886cf44a85189e1fd4067f"
50785074
dependencies:
50795075
options ">=0.0.5"
50805076
ultron "1.0.x"
50815077

5082-
ws@^1.0.1:
5083-
version "1.1.1"
5084-
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.1.tgz#082ddb6c641e85d4bb451f03d52f06eabdb1f018"
5085-
dependencies:
5086-
options ">=0.0.5"
5087-
ultron "1.0.x"
5088-
50895078
[email protected]:
50905079
version "1.0.0"
50915080
resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"

0 commit comments

Comments
 (0)