Getting error 'Types of parameters 'action' and 'action' are incompatible' when trying to add reducer to the ngrx store in app.module

Question

I have been trying to create a sample TODO application to learn ngrx, my application has 'Actions' like ADD_TASK, REMOVE_TASK, UPDATE_TASK and LIST_TASk and it has a reducer function which does operations on the state based on the action types. Please, find below my apps actions and reducers code.

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

It is when i try to add the StoreModule, I run into issues.

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

when i try to add "tasksreducer" to storemodule i get the below errors. can anybody help me?

Error: src/app/app.module.ts:23:5 - error TS2322: Type '(state: Task[] | undefined, action: TASKSActionsType) => Task[]' is not assignable to type 'ActionReducer<Task[], Action>'. Types of parameters 'action' and 'action' are incompatible. Type 'Action' is not assignable to type 'TASKSActionsType'. Property 'payload' is missing in type 'Action' but required in type 'LISTTASk'.