NGRX angular 5 带 AOT 编译器的减速器

Question

我很难将 NGRX 存储从 JIT 编译器重写为 AOT 编译器。 const accountReducer 应该是导出函数，但我不知道如何修复它。

有没有简单的重写示例，或者有人可以帮我解决这个问题吗？

错误

'accountReducer' contains the error at app/store/account/account.reducer.ts(19,64) Consider changing the function expression into an exported function.

我有以下设置：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { LOCALE_ID, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';

// NGRX store
import { StoreModule,   ActionReducer } from '@ngrx/store';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { rootReducer } from 'store';

// Core
import { environment } from 'environments/environment';
import { AppComponent } from './app.component';

// Routes
import { AppRoutingModule } from 'routes';

@NgModule({
    declarations: [
        AppComponent,
    ],
    imports: [
        BrowserModule,
        HttpClientModule,
        StoreModule.forRoot(rootReducer), !environment.production ? StoreDevtoolsModule.instrument({
            maxAge: 10,
        }) : [],
        AppRoutingModule,
    ],
    providers: [],
    bootstrap: [AppComponent],
})
export class AppModule {}

root.reducer.ts

import { ActionReducerMap } from '@ngrx/store';
import { routerReducer } from '@ngrx/router-store';

import { initialAccountState, accountReducer } from './account/account.reducer';
import { AccountInterface } from './account/account.interface';

export interface StateInterface {
    account: AccountInterface;
    router: any;
}

// Store root state
export const InitialState = {
    account: initialAccountState,
};

// Store root reducer
export const rootReducer: ActionReducerMap<StateInterface> = {
    account: accountReducer,
    router: routerReducer,
};

account.reducer.ts

import { ActionReducer, Action } from '@ngrx/store';
import { tassign } from 'tassign';

import { saveState, rehydrateState, rehydrateAction } from 'helpers';
import { DefaultAction } from 'interfaces';

import { AccountConstants } from './account.constants';
import { AccountInterface } from './account.interface';

export const initialAccountState: AccountInterface = {
    account: null,
    hash: {
        isLoading: true,
        isAccepted: false,
    },
    isLoggedIn: false,
};

export const accountReducer: ActionReducer<AccountInterface> = (state: AccountInterface = initialAccountState, action: DefaultAction) => {
    const { type, payload } = action;
    let newState: any = state;

    switch (type) {
        case AccountConstants.ACTION_ACCOUNT_LOGOUT_ACCOUNT:
            newState = tassign(initialAccountState);
            break;

        case AccountConstants.ACTION_HASH_DENIED:
            newState = tassign(state, {
                hash: {
                    isLoading: false,
                    isAccepted: false,
                },
            });
            break;

        case AccountConstants.ACTION_HASH_ACCEPTED:
            newState = tassign(state, {
                hash: {
                    isLoading: false,
                    isAccepted: true,
                },
            });
            break;

        // Optional: if the state requires saving storage.
        case rehydrateAction:
            const rehydratedState = rehydrateState('account');
            newState = tassign(state, rehydratedState);
            break;
    }

    // If it's not default init.
    if (type !== rehydrateAction) {
        // Save the whole store, keys or whatever you want :-)
        saveState('account', newState);
    }
    return newState;
};

Answer 1

将 reducer 声明更改为函数：

export function accountReducer(
    state: AccountInterface = initialAccountState,
    action: DefaultAction) {
     ...
}

您的编写方式曾经有效，但需要更新为以上版本以获取新版本。

如果您从版本 4 之前的 NgRx 升级 this migration 可能会有用。

NGRX angular 5 带 AOT 编译器的减速器

NGRX angular 5 reducer with AOT compiler

typescript

ngrx

angular2-aot

angular