javascript - state.concat är inte en funktion - Typ 'ITask' är inte en array-typ

Jag försöker lägga till en array till min store, men får hela tiden följande fel vid tasks: payload.payload ? [ ...state, payload.payload ] : [], Error:(22, 35) TS2461: Type 'ITask' is not an array type. Hur åtgärdar jag det?

import * as TaskActions from './task.actions';
import { Action, createReducer, on } from '@ngrx/store';
import { ITask } from '../../models/task';

export interface State {
  task: ITask | null;
  error: any;
}

const initialState: ITask = {
  basketTotal: 0,
  carePlanPrice: 0,
  category: null,
  completionDate: null
};

export const taskReducer = createReducer(
  initialState,
  on(TaskActions.getData, state => ({ ...state })),
  on(TaskActions.dataReceived, (state, payload) => ({
    ...state,
    tasks: payload.payload ? [ ...state,  payload.payload ] : []
  })),
  on(TaskActions.dataNotReceived, state => ({ ...state })),
  on(TaskActions.signOut, state => ({ ...state })),
  on(TaskActions.signOutSuccess, state => ({ ...state, ...initialState })),
);

export function reducer(state: ITask | undefined, action: Action) {
  return taskReducer(state, action);
}

Skärmdump :

Svar #1

Task, payload är inte arrayer. Så det finns inget behov av att använda spread-operatorn.

tasks: payload.payload ? [ state,  payload.payload ] : []

MDN säger:

Spridningssyntax tillåter ett itererbart objekt såsom ett arrayuttryck eller en sträng att utvidgas på platser där noll eller fler argument (för funktionsanrop) eller element (för arrayliteral) förväntas, eller ett objektuttryck att utvidgas på platser där noll eller fler nyckel-värde-par (för objektliteral) förväntas.

Om du vill lägga till dem som objekt:

tasks: payload.payload ? [ { ...state}, {...payload.payload} ] : []

Svar #2

Du behöver ändra din kod så här

const initialState: State = {
  //set default initial state inside
};

Använder State-gränssnittet för initialState, inte ITask

Eftersom ditt gränssnitt bara har 2 egenskaper

task: ITask | null;
error: any;

Så ditt initialState kommer att vara

const initialState: State = {
  task: null,
  error: null
};

Och din reducerare

on(TaskActions.dataReceived, (state, payload) => ({
    ...state,
    task: payload.payload ? [ ...state,  payload.payload ] : []
  })),