Question

我在我的应用程序中遇到了一个问题，因为我在几个我的Reducer中遇到错误。我把断点放在有问题的线上，似乎没有任何问题，所以我有点困惑。我得到的错误是：

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实现是否正确？我不确定为什么我会收到错误而且实际上不知道从哪里开始！

由于

Answer 1

您很可能会收到此错误，因为您尚未将状态导出到您的状态。此外，即使你说的是一个数字，我也没有设置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
};

Angular4

1 个答案: