0

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

任务操作.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

taskreducer.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 时，我遇到了问题。

应用模块.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<Task[ ]，动作>'。参数“action”和“action”的类型不兼容。类型“Action”不可分配给类型“TASKSActionsType”。“Action”类型中缺少属性“payload”，但在“LISTTASk”类型中是必需的。

4

0 回答 0