Currently, I am working on a piece of code where my main focus is to add a reducer to the module. Here's the snippet:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { StoreModule } from '@ngrx/store';
import {Action} from '@ngrx/store';
import { Component } from '@angular/core';
class Book {
id: number;
name: string;
}
class BookStore {
books: Book[];
}
const ADD_BOOK = '[Book] Add book';
export function addReducer(state = BookStore, action: Action) {
console.log(state, action);
switch (action.type) {
}
}
@Component({
selector: 'app-root',
template: '<h1>Hello!</h1>',
})
export class AppComponent {
title = 'app';
}
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
StoreModule.forRoot({ count: addReducer })
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
However, upon adding this line of code:
StoreModule.forRoot({ count: addReducer })
The content of my page disappears, including the 'Hello!' message, and oddly no errors are shown in the console.
Here are the versions of libraries that I'm currently using:
"dependencies": {
"@angular/animations": "^4.2.4",
"@angular/common": "^4.2.4",
"@angular/compiler": "^4.2.4",
"@angular/core": "^4.2.4",
"@angular/forms": "^4.2.4",
"@angular/http": "^4.2.4",
"@angular/platform-browser": "^4.2.4",
"@angular/platform-browser-dynamic": "^4.2.4",
"@angular/router": "^4.2.4",
"@ngrx/effects": "^6.1.0",
"@ngrx/store": "^6.1.0",
"core-js": "^2.4.1",
"rxjs": "^5.4.2",
"zone.js": "^0.8.14"
},
I am trying to understand what could be causing this issue. Do you think I might need to make some additional modifications to my reducer?