0

我对 Angular 很陌生，我的第一个项目是将 Angular 2 应用程序转换为最新版本。我被困在这个错误上：

ERROR in ... /src/app/app.module.ts (39,31): Type 'Reducer' is not generic.

另一个似乎相关的错误：

ERROR in Error encountered resolving symbol values statically. Function 

calls are not supported. Consider replacing the function or lambda with a reference to an exported function (position 40:57 in the original .ts file), resolving symbol snapshotReducer in .../src/app/app.module.ts,
resolving symbol AppModule in .../src/app/app.module.ts,
resolving symbol AppModule in .../src/app/app.module.ts,
resolving symbol AppModule in .../src/app/app.module.ts

webpack: Failed to compile.

我不知道如何处理错误：“考虑用对导出函数的引用替换函数或 lambda”

我已将整个应用程序最小化为一个仍然会产生错误的模块：

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {StoreModule, Store, Reducer, Action} from '@ngrx/store'

const CATEGORY = 'Snapshot';

export interface ISnapshotState {
      image?: any;
      element?: any;
    }


const initialState: ISnapshotState = {
};

interface ISNAPSHOT_ACTIONS {
  SNAPSHOT_NOW: string;
  SNAPSHOT_READY: string;
  SNAPSHOT_CLEAR: string;
}

export const SNAPSHOT_ACTIONS: ISNAPSHOT_ACTIONS = {
  SNAPSHOT_NOW: `[${CATEGORY}] SNAPSHOT_NOW`,
  SNAPSHOT_READY: `[${CATEGORY}] SNAPSHOT_READY`,
  SNAPSHOT_CLEAR: `[${CATEGORY}] SNAPSHOT_CLEAR`
};

export const snapshotReducer: Reducer<ISnapshotState> = (state: ISnapshotState = initialState, action: Action) => {
  // action here;
  action = action;
};

const rootReducer = {
  snapshot: snapshotReducer
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    StoreModule.provideStore(rootReducer)
    ],
  providers: []
  ,
  bootstrap: [AppComponent]
})
export class AppModule { }

这是我正在使用的软件（使用 npm outdated 命令）

Package                           Current  Wanted  Latest  Location
@angular/cli                        1.0.0   1.0.0   1.2.1  reducertest
@types/jasmine                     2.5.38  2.5.38  2.5.53  reducertest
@types/node                        6.0.81  6.0.81  8.0.11  reducertest
codelyzer                           2.0.1   2.0.1   3.1.2  reducertest
jasmine-core                        2.5.2   2.5.2   2.6.4  reducertest
jasmine-spec-reporter               3.2.0   3.2.0   4.1.1  reducertest
karma                               1.4.1   1.4.1   1.7.0  reducertest
karma-chrome-launcher               2.0.0   2.0.0   2.2.0  reducertest
karma-coverage-istanbul-reporter    0.2.3   0.2.3   1.3.0  reducertest
ts-node                             2.0.0   2.0.0   3.2.0  reducertest
tslint                              4.5.1   4.5.1   5.5.0  reducertest
typescript                          2.2.2   2.2.2   2.4.1  reducertest

其他依赖：

"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@angular/router": "^4.0.0",
"@ngrx/core": "^1.2.0",
"@ngrx/store": "^2.2.3",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.8.4"

我已经用谷歌搜索并尝试过，但没有解决方案。好奇你怎么想！

4

1 回答 1

0

减速器不返回减速器。它返回状态对象。所以你需要返回 ISnapshotState 而不是 Reducer；

从您的代码看来，您正在尝试分配操作。基本上，reducers 是返回新状态的纯函数。一个约定是使用 switch case。

你的代码看起来像

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import {StoreModule, Store, Reducer, Action} from '@ngrx/store'

const CATEGORY = 'Snapshot';

export interface ISnapshotState {
      image?: any;
      element?: any;
    }


const initialState: ISnapshotState = {
};

interface ISNAPSHOT_ACTIONS {
  SNAPSHOT_NOW: string;
  SNAPSHOT_READY: string;
  SNAPSHOT_CLEAR: string;
}

export const SNAPSHOT_ACTIONS: ISNAPSHOT_ACTIONS = {
  SNAPSHOT_NOW: `[${CATEGORY}] SNAPSHOT_NOW`,
  SNAPSHOT_READY: `[${CATEGORY}] SNAPSHOT_READY`,
  SNAPSHOT_CLEAR: `[${CATEGORY}] SNAPSHOT_CLEAR`
};

export const snapshotReducer: ISnapshotState = (state: ISnapshotState = initialState, action: Action) => {


     switch(action.type){
        default:
          return state;
      }
    };

const rootReducer = {
  snapshot: snapshotReducer
}

@NgModule({
  declarations: [AppComponent],
  imports: [
    StoreModule.provideStore(rootReducer)
    ],
  providers: []
  ,
  bootstrap: [AppComponent]
})
export class AppModule { }
于 2017-07-13T09:50:28.160 回答