Getting Started - Step 6 is overloaded

[andrewseguin]

The step 6 of the Getting Started guide may need to be broken down into a few extra steps.

Current Documentation

6. Create a new Component named my-counter in the app folder. Inject the Store service into your component to dispatch the counter actions, and use the select operator to select data from the state.

Update the MyCounterComponent template with buttons to call the increment, decrement, and reset methods. Use the async pipe to subscribe to the count$ observable.

[my-counter.component.html content]

Update the MyCounterComponent class with a selector for the count, and methods to dispatch the Increment, Decrement, and Reset actions.

[my-counter.component.ts content]

Feedback

The step tells you to create a new component, but does not tell you which files to create (e.g. template, styles, logic).

It tells you to inject the Store before telling you what your component logic looks like, and the next paragraph seems to talk about templating, not logic.

The template references methods and properties that are not yet introduced to the user ("buttons to call the increment, decrement, and reset methods", "subscribe to the count$ observable")

The next paragraph tells you to update your component logic, but as a user, I still don't have any yet because you haven't told me where to start ("Update the MyCounterComponent class with a selector for the count")

Nitpicks:

• The component imports from ../counter.actions, but it wasn't stated that the files should be in a nested folder.
• A reference to a style file is made but never defined.
• Step 7 refers to a MyCounter component but it is called MyCounterComponent in the code

Suggestion

I suggest that step 6 should be based on helping the user setup a new component with stubs for NgRX parts. Step 7 can be for adding the component to the module and app template. Then, step 8 can focus on what it looks like to add NgRX to a component.

I'd also consider adding a completed StackBlitz example at the end for the user's to check out in case they messed up somewhere and just want to see the final result.

6. Create a new file called my-counter.component.ts in the app folder that will define a new component called MyCounterComponent. This component will render buttons that allow the user to change the count state.

my-counter.component.ts:

import { Component } from '@angular/core';
import { Observable } from 'rxjs';
 
@Component({
  selector: 'app-my-counter',
  template: `
    <button (click)="increment()">Increment</button> 

    <div>Current Count: {{ count$ | async }}</div>

    <button (click)="decrement()">Decrement</button>

    <button (click)="reset()">Reset Counter</button>
  `
})
export class MyCounterComponent {
  // TODO: This stream will connect to the current store `count` state
  count$: Observable<number>;
 
  increment() {
    // TODO: Dispatch an increment action
  }
 
  decrement() {
    // TODO: Dispatch a decrement action
  }
 
  reset() {
    // TODO: Dispatch a reset action
  }
}

Step 7: Add the new component to your AppModule's declarations and declare it in the template:

app.component.html

<app-my-counter></app-my-counter>

app.component.ts

...
import {MyCounterComponent} from './my-counter.component';
...
@NgModule({
  ...
  declarations: [ 
    AppComponent,
    MyCounterComponent 
  ],
  ...
})
export class AppModule { }

Step 8: Inject the store into MyCounterComponent and connect the count$ stream to the store's count state. Implement the increment, decrement, and reset methods by dispatching actions to the store.

my-counter.component.ts:

...
import { Store, select } from '@ngrx/store';
import { Increment, Decrement, Reset } from '../counter.actions';
...

export class MyCounterComponent {
 count$: Observable<number>;
 
  constructor(private store: Store<{ count: number }>) {
    this.count$ = store.pipe(select('count'));
  }
 
  increment() {
    this.store.dispatch(new Increment());
  }
 
  decrement() {
    this.store.dispatch(new Decrement());
  }
 
  reset() {
    this.store.dispatch(new Reset());
  }
}

[brandonroberts]

Thanks for the feedback @andrewseguin. I think those are some good changes to make also.

[santoshyadavdev]

HI @andrewseguin ,

Are you planning to open the PR, please let us know.

[santoshyadavdev]

Hi @brandonroberts ,

Will work on it.

[brandonroberts]

@santoshyadav198613 wait until #1819 lands before opening another PR.

[santoshyadavdev]

Ok all the comments are taken care,but let me check with Wes and Tim