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.
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.
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":
I am too. Seems to be a recurring pattern with these courses..Angular2/RxJs is changing too quickly for EggHead to keep up.
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!
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.
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...