Type 'Réducteur' n'est pas générique dans Angular 4

Question

Je suis assez nouveau pour Angular et un de mes premiers projets est de transformer une application Angular 2 en la dernière version. Je suis bloqué sur cette erreur:

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

avec une autre erreur qui semble être lié:

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. 

Je ne sais pas quoi faire avec l'erreur: « Envisager de remplacer la fonction ou lambda avec une référence à une fonction exportée »

j'ai minimisé l'application totale dans un module qui génère toujours l'erreur:

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

Ce

est le logiciel que je utilise (avec NPM commande pas à jour)

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 

Autres dépendances:

"@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" 

J'ai googlé et essayé et essayé, mais pas de solution. Curieux de ce que vous en pensez!

Answer 1

Les réducteurs ne renvoient pas de réducteur. Il renvoie l'objet Etat. Vous devez donc renvoyer ISnapshotState au lieu de Reducer;

De votre code, il semble que vous essayez d'assigner une action. Fondamentalement, les réducteurs sont des fonctions pures qui retournent un nouvel état. Une convention est d'utiliser un boîtier de commutateur.

Votre code ressemblera

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