尝试将减速器添加到 app.module 中的 ngrx 存储时出现错误“参数类型‘动作’和‘动作’不兼容”

编程问答 2022-05-02

问题描述

我一直在尝试创建一个示例 Todo 应用程序来学习 ngrx，我的应用程序具有诸如 ADD_TASK、REMOVE_TASK、UPDATE_TASK 和 LIST_TASk 之类的“操作”，并且它具有根据操作类型对状态执行操作的 reducer 函数。请在下面找到我的应用操作和减速器代码。

tasksactions.ts

import { Action } from "@ngrx/store";
import { Injectable } from '@angular/core'
import { Task } from '../../models/tasks';

export const ADD_TASK = '[TASK] ADD_TASK';
export const REMOVE_TASK = '[TASK] REMOVE_TASK';
export const UPDATE_TASK = '[TASK] UPDATE_TASK';
export const LIST_TASk = '[TASK] LIST_TASk';


export class ADDTASK implements Action
{
readonly type = ADD_TASK;

constructor(public payload: Task){}

}

export class REMOVETASK implements Action
{
readonly type = REMOVE_TASK;

constructor(public payload: Task) {}
}

export class UPDATETASK implements Action
{
readonly type = UPDATE_TASK;

constructor(public payload: Task) {}
}

export class LISTTASk implements Action
{
readonly type = LIST_TASk;

constructor(public payload: any) {}
}

export type TASKSActionsType = | ADDTASK | REMOVETASK | UPDATETASK | LISTTASk

tasksreducer.ts

import { Task } from "src/app/models/tasks";
import { Action,ActionReducerMap } from '@ngrx/store';
import * as TaskActions from "../actions/tasksactions";
import { AppState } from "../app.state";


const initialState: Task[] = [{
TaskID: '',TaskName: '',TaskDescription: '',DueDate: new Date('09/05/2021')
}];


export function tasksreducer (state = initialState,action: TaskActions.TASKSActionsType): Task[]
{
switch(action.type)
{
    case TaskActions.ADD_TASK : return [...state,action.payload];
    case TaskActions.REMOVE_TASK: return state.filter((data) => action.payload.TaskID != data.TaskID);
    default:
        return state;
}
}

当我尝试添加 StoreModule 时，我遇到了问题。

App.Module.ts

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

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AddCompComponent } from './add-comp/add-comp.component';

import { ReactiveFormsModule } from '@angular/forms';
import { StoreModule } from '@ngrx/store';
import { tasksreducer } from './store/reducers/tasksreducer';


@NgModule({
declarations: [
AppComponent,AddCompComponent
],imports: [
browserModule,AppRoutingModule,ReactiveFormsModule,StoreModule.forRoot({
tasks: tasksreducer 
})
],providers: [],bootstrap: [AppComponent]
})
export class AppModule { }

当我尝试将“tasksreducer”添加到 storemodule 时，出现以下错误。有人可以帮我吗？

错误：src/app/app.module.ts:23:5 - 错误 TS2322：类型 '(state: Task[] | undefined,action: TASKSActionsType) => Task[]' 不可分配给类型 'ActionReducer '。 参数“action”和“action”的类型不兼容。 “Action”类型不能分配给“TASKSActionsType”类型。 “Action”类型中缺少“payload”属性，但“LISTTASk”类型中需要该属性。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

angularangularngrxngrx-reducersngrx-storetypescripttypescripttypescript