I am currently facing an issue in my application where I am encountering the following error in a few of my reducers. Upon placing breakpoints on the line causing trouble, there doesn't seem to be any apparent issue, leaving me confused. The error message reads as follows:
ERROR TypeError: undefined is not a function
at exports.usersUIReducer (usersUI.reducer.ts:14)
Below is the relevant code snippet:
app.module
//Initializing the Angular Object
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
ReactiveFormsModule,
HttpModule,
ChartsModule,
AgmCoreModule.forRoot({
apiKey: APP_DI_CONFIG.GOOGLE_MAPS_API_KEY
}),
StoreModule.provideStore({
reportExceptionsReducer,
reportExceptionFormDefaultsReducer,
reportExceptionsModelReducer,
reportExceptionUIReducer,
usersReducer,
usersUIReducer
}),
routing
],
.......
UserDashboardComponent.ts
import { Component, OnInit } from "@angular/core";
import { AuthenticationService } from "../../services/authentication.service";
import { UserService } from "../../services/users/user.service";
import { User } from "../../classes/User.class";
import { Store } from "@ngrx/store";
import { CHANGE_USERS_FILTERS, POPULATE_USERS } from "../../state/actions/actions";
@Component({
selector: 'user-dashboard',
moduleId: module.id,
templateUrl: '/app/views/users/users-dashboard.component.html'
})
export class UsersDashboardComponent {
protected users: Array<User>;
protected payload: Object;
protected viewState: Object = {
usersLoaded: false as boolean
};
protected activeUsersConfig: Object = {
title: 'Users',
showEdit: true as Boolean,
showDelete: true as Boolean
};
constructor(
private _userService: UserService,
private _authenticationService: AuthenticationService,
private _store: Store<any>
) {
this._store.select('usersReducer')
.subscribe((users) => {
this.users = users;
});
this._store.select('usersUIReducer')
.subscribe((payload) => {
this.payload = payload;
if(!this._authenticationService.isSuper()) {
this.payload.account = this._authenticationService.accountId
}
});
this.getUsers();
}
getUsers(): void {
this._userService.getUsers(this.payload)
.subscribe((response) => {
this._store.dispatch({ type: POPULATE_USERS, payload : {users: response.extras.Users}});
this.viewState.usersLoaded = true;
//this.payload.maxItems = response.Users.maxItems;
});
}
paginationChange(pageNum): void {
this.viewState.usersLoaded = false;
const offset = pageNum * this.payload.limit;
this._store.dispatch({ type: CHANGE_USERS_FILTERS, payload: { offset }});
this.getUsers();
}
}
and the reducer
import { Action } from "@ngrx/store";
import { CHANGE_USERS_FILTERS } from "../../actions/actions";
const initialState = {
account: undefined as number,
limit: 1 as number,
maxItems: 10 as number,
offset: 0 as number
};
export const usersUIReducer = (state: any = initialState, action: Action) => {
switch(action.type) {
case CHANGE_USERS_FILTERS :
return Object.assign({}, ...state,
action.payload
);
default :
return state;
}
};
Could someone more experienced with ngrx take a look and verify if my implementation is correct? I am struggling to identify the cause of the error and don't know where to begin!
Your help would be greatly appreciated.