Use ngrx/store and Reducers for Angular Application State

John Lindquist
InstructorJohn Lindquist

Share this video with your friends

Send Tweet

ngrx/store is a library that simplifies common RxJS patterns for managing state and gives you an easy api to use it within your Angular application. This lesson shows how to convert a common startWith and scan stream into an ngrx Store and reducer.

Nathan Brenner
Nathan Brenner
~ 5 years ago

This works, and it matches the current docs:

import { StoreModule } from '@ngrx/store';
@NgModule({
    imports: [ StoreModule.provideStore({ clock: clock }, { clock: new Date() }) 

The first parameter to the provideStore method is the reducer function, the second is the initialized state.

Doug
Doug
~ 5 years ago

I'm still getting an error in ng2:

ERROR in [default] /Users/dougboyd/look/learn-rxjs/src/app/app.component.ts:21:21 
Generic type 'Store<T>' requires 1 type argument(s).
Child html-webpack-plugin for "index.html":
Jon
Jon
~ 4 years ago

I am too. Seems to be a recurring pattern with these courses..Angular2/RxJs is changing too quickly for EggHead to keep up.

James
James
~ 4 years ago

It looks like you have to install ngrx separately

step 1 - install from here https://github.com/ngrx/store

npm install @ngrx/core @ngrx/store --save

step 2 - add to your module

import { clock } from './reducers'
import { StoreModule } from 'ngrx/store'
  
@Ngmodule({
  imports: [ // NOT bootstrap like in the demo
    StoreModule.provideStore({ clock })
 // ... the rest of your module

step 3 - add to your component

import { Store } from '@ngrx/store'

export class AppComponent {
  click$ = new Subject()
  clock
  constructor(store: Store<any>) { // either use `any` type or swap in your class interface for typescript
    this.clock = store.select('clock')
// ...

step 4 - add your .reducers.ts

export const clock = (state: Date = new Date(), {type}) => {
  const date = new Date(state.getTime());
  switch (type) {
    case 'second':
      date.setSeconds(date.getSeconds() + 1);
      return date;
    case 'hour':
      date.setHours(date.getHours() + 1);
      return date;
  }
  return state;
}

Hope this helps!

Omar Qaddoumi
Omar Qaddoumi
~ 3 years ago

Ok, so the comments above helped me figure out my issue. I'm building this on stackblitz.com using the latest Angular and rxjs and @ngrx/store.

rxjs: 5.5.2  
core-js: 2.5.1  
@angular/core: 5.0.0  
@ngrx/store: 4.1.1  

And what I needed to do was to follow the advice of not setting this up in my main.ts file, but instead, setup the following in my app.module:

import { StoreModule } from '@ngrx/store';  
import { clock } from './reducers/reducers';  

imports:      [ 
    BrowserModule, 
    FormsModule,
    StoreModule.forRoot({clock})
  ],

thanks for the help, guys; as you mentioned, this stuff is changing faster than egghead can keep up. I think these few comments in the discussion will hope most that get stuck.

Aljosha Novakovic
Aljosha Novakovic
~ 2 years ago

What's the deal with this format of "bootstrapping" it into angular? I guess this is how setup was 2 or 3 years ago? For a paid course I would expect that simple updates can be made on the videos... I'm finding myself using free youtube courses for learning ngrx more so far...