0

我正在尝试学习如何在 Angular 应用程序中实现 redux。我关注 了 https://github.com/ngrx/platform/tree/master/docs/store

我按照提供的所有步骤操作，但收到此错误

'"counter"' 类型的参数不能分配给 '(state: IAppState) => number' 类型的参数。

我无法理解我错过了什么。

import { Observable } from 'rxjs/Observable';
import { MileStoneService } from './milestone.service';
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Store } from '@ngrx/store';
import {  INCREMENT ,DECREMENT ,RESET} from './app.actions'; // <- New    
import { MileStoneModel } from "app/MileStoneModel";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
interface IAppState {
  counter: number;
  //mileStones: MileStoneModel[]
}

export class AppComponent implements OnInit  {
  title = 'app';
  counter$: Observable<number>;
 readonly mileStones$: Observable<MileStoneModel>;

 constructor(private store: Store<IAppState>  , private _service: MileStoneService ) {
     // HERE IS THE ERROR
        this.counter$ = this.store.select<number>('counter');
    }

    increment(){
        this.store.dispatch({ type: INCREMENT });
    }

    decrement(){
        this.store.dispatch({ type: DECREMENT });
    }

    reset(){
        this.store.dispatch({ type: RESET });
    }

}

应用模块类

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MileStoneService } from './milestone.service';
import { AppComponent } from './app.component';
import { Http,HttpModule, Response, Headers, RequestOptions } from '@angular/http';


import { StoreModule } from '@ngrx/store';
import { EffectsModule } from '@ngrx/effects';
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { environment } from '../environments/environment';
import { counterReducer } from "app/app.actions";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule  , HttpModule ,
    StoreModule.forRoot({ counter: counterReducer }) ,
    !environment.production ? StoreDevtoolsModule.instrument() : [],

  ],
  providers: [ MileStoneService],
  bootstrap: [AppComponent]
})
export class AppModule { 


}

减速机功能

export const INCREMENT  = '[Counter] Increment';
export const DECREMENT  = '[Counter] Decrement';
export const RESET      = '[Counter] Reset';

export function counterReducer(state: number = 0, action: Action) {
    switch (action.type) {
        case INCREMENT:
            return state + 1;

        case DECREMENT:
            return state - 1;

        case RESET:
            return 0;

        default:
            return state;
    }
}
4

0 回答 0