使用接口时,为什么我的减速器初始状态出现类型错误?

时间:2019-01-18 08:55:31

标签: angular typescript

如何将接口与我的reducer的初始状态(角度6)结合使用?当我将接口与减速器的初始状态结合使用时,会出现以下错误:

  src / app / core / store / event / event.reducer.ts(8,14)中的

ERROR:错误   TS2322:键入'{loading:false;已加载:false;失败:错误;数据:   undefined []; selectedEvent:{}; }”不可分配给“事件”类型。   属性“ selectedEvent”的类型不兼容。       类型“ {}”不可分配给类型“事件”。         类型“ {}”中缺少属性“ id”。

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;

0 个答案:

没有答案