2017-10-24 7 views
0

내 감속기 몇 개에서 오류가 발생하여 현재 애플리케이션에 문제가 있습니다. 문제의 라인에 중단 점을 넣었습니다. 문제가없는 것 같아서 약간 혼란 스럽습니다. 내가 오류는 다음과 같습니다 여기 각도 4의 ngrx 감속기 내부에서 정의되지 않은 오류가 발생했습니다.

ERROR TypeError: undefined is not a function 
    at exports.usersUIReducer (usersUI.reducer.ts:14) 

는 관련 코드입니다 :

app.module

//Instantiate 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(); 
    } 
} 

및 감속기

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; 
    } 
}; 

경험이 많은 다른 사용자가 볼 수있는 한 ngrx를 올바르게 구현 한 것입니까? 나는 왜 내가 오류를 얻고 있는지 그리고 문자 그대로 시작 해야할지를 알지 못한다! 당신이 당신의 국가에 대한 인터페이스를 수출하지 않았기 때문에

감사

+0

당신이 plunkr와 샘플 코드에서이 문제를 재현 할 수 있습니다

당신은 뭔가를해야합니까? – Thaadikkaaran

답변

0

당신이 가장 가능성이 오류를 얻고있다. 또한, 숫자라고 말하는데도 account: undefined을 설정하는 시점이 아닙니다.

export interface State { 
    account: number, 
    limit: 1 number, 
    maxItems: number, 
    offset: number 
} 

export const initialState: State = { 
    account: 0, 
    limit: 1, 
    maxItems: 0, 
    offset: 0 
}; 
관련 문제