How do I use interfaces combined with the initial state of my reducer in angular 6? When I use interfaces combined with the initial state of my reducer I get the following error:
ERROR in src/app/core/store/event/event.reducer.ts(8,14): error
TS2322: Type ‘{ loading: false; loaded: false; failed: false; data:
undefined[]; selectedEvent: {}; }’ is not assignable to type ‘Events’.
Types of property ‘selectedEvent’ are incompatible.
Type ‘{}’ is not assignable to type ‘Event’.
Property ‘id’ is missing in type ‘{}’.
event.interface.ts
export interface Event {
id: string;
title: string;
date: string;
place: string;
line: string;
type: string;
vehicle: string;
matriculeNr: string;
filterCTX: string;
status: string;
recordExisting: string;
mode: string;
module: string;
object: string;
eventId: string;
sharedObjects: SharedObject[];
eventTime: string;
eventCodeDescr: string;
eventCodeDescrCorp: string;
description: string;
selectedAsMain: boolean;
selectedAsDetail: boolean;
selected: boolean;
documents: Document[];
participants: Participant[];
}
export interface Events {
loading: boolean;
loaded: boolean;
failed: boolean;
data: Array<Event>;
selectedEvent: Event;
}
export interface Document {
id: string;
name: string;
docLink: string;
}
export interface Participant {
id: string;
relation: string;
firstName: string;
lastName: string;
updateUser: string;
updateDate: string;
}
export interface SharedObject {
id: string;
}
event.reducer.ts
import * as events from './event.actions';
import { tassign } from 'tassign';
import { Events } from '@app/core/interfaces/event.interface';
/**
* Initial state for events
*/
export const EVENTS_INITIAL_STATE: Events = {
loading: false,
loaded: false,
failed: false,
data: [],
selectedEvent: {},
};
/**
* Case functions
*/
function load(state: Events): Events {
return tassign(state, { loading: true });
}
function loadSuccess(state: Events, action: events.LoadSuccess): Events {
return tassign(state, {
loaded: true,
loading: false,
failed: false,
data: action.payload,
selectedEvent: {},
});
}
function loadFail(state: Events): Events {
return tassign(state, {
loaded: false,
loading: false,
failed: true,
data: [],
selectedEvent: {},
});
}
function selectMainEvent(
state: Events,
action: events.SelectMainEvent
): Events {
const updatedData = state.data.map(event => {
if (event.id === action.payload) {
return {
...event,
selectedAsMain: true
};
}
return {
...event,
selectedAsMain: false
};
});
return tassign(state, {
loaded: true,
loading: false,
failed: false,
data: updatedData,
selectedEvent: {},
});
}
function selectDetailEvent(
state: Events,
action: events.SelectDetailEvent
): Events {
const updatedData = state.data.map(event => {
if (event.id === action.payload.eventId) {
return {
...event,
selectedAsDetail: true
};
}
return {
...event,
selectedAsDetail: false
};
});
return tassign(state, {
loaded: true,
loading: false,
failed: false,
data: updatedData,
selectedEvent: action.payload,
});
}
/**
* EventsReducer
*
* @param state
* @param action
*/
export function reducer(
state: Events = EVENTS_INITIAL_STATE,
action: events.Actions
): Events {
switch (action.type) {
case events.LOAD:
return load(state);
case events.LOAD_SUCCESS:
return loadSuccess(state, action);
case events.LOAD_FAIL:
return loadFail(state);
case events.MAIN_EVENT_SELECTED:
return selectMainEvent(state, action);
case events.DETAIL_EVENT_SELECTED:
return selectDetailEvent(state, action);
}
return state;
}
/**
* Selectors
*/
export const getData = (state: Events) => state.data;
export const getSelectedEvents = (state: Events) =>
state.data.filter(event => event.selected);
export const getSelectedDetailEvent = (state: Events) => state.selectedEvent;
export const getLoading = (state: Events) => state.loading;
export const getLoaded = (state: Events) => state.loaded;
export const getFailed = (state: Events) => state.failed;
Source: Angular
