时间戳

首页 > 解决方案 > 尝试实现动作减速器时出现角度ngrx抛出错误

html - 尝试实现动作减速器时出现角度ngrx抛出错误

问题描述

反动作.ts

    import { createAction } from "@ngrx/store";

export const increment = createAction('[Counter Component] Increment');
export const decrement = createAction('[Counter Component] Decrement');
export const reset = createAction('[Counter Component] Reset');

counter.reducer.ts

  import { createReducer, on } from "@ngrx/store";
import { increment, decrement,  reset } from "./counter.actions";

export const initialState = 0;

const _counterReducer = createReducer(
    initialState,
    on(increment, (state) => state + 1),
    on(decrement, (state) => state - 1),
    on(reset, (state) => 0)
);

export function counterReducer(state, action) {
    return _counterReducer(state, action);
}

app.module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { StoreModule } from '@ngrx/store';
import { counterReducer } from "./counter.reducer";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    StoreModule.forRoot({ count: counterReducer })
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

输出 16 StoreModule.forRoot({ count: counterReducer }) ~~~~~ 错误：src/app/app.module.ts:16:27 - 错误 TS2322: Type '(state: number, action: Action) => number ' 不可分配给类型 'ActionReducer<number, Action>'。参数 'state' 和 'state' 的类型不兼容。输入'号码 | undefined' 不可分配给类型 'number'。类型“未定义”不可分配给类型“数字”。

    16     StoreModule.forRoot({ count: counterReducer })
                                 ~~~~~
        Error: src/app/counter.reducer.ts:14:32 - error TS7006: Parameter 'state' implicitly has an 'any' type.
        
        14 export function counterReducer(state, action) {
                                          ~~~~~
        src/app/counter.reducer.ts:14:39 - error TS7006: Parameter 'action' implicitly has an 'any' type.
        
        14 export function counterReducer(state, action) {

标签： htmlcssangular

解决方案

试试这个只是修复你的初始状态

const _counterReducer = createReducer(
    // initialize it
    initialState = {count: number} ,

    // your accessor need to access the values inside the state
    on(increment, (state) =>  parseInt(state.count)++),
    on(decrement, (state) =>  parseInt(state.count)--),
    on(reset, (parseInt(state.count)) => 0)
);

推荐阅读