CODEWITHSUNDEEP
javascriptreactjstypescriptredux
Aessandro
Aessandro

Reputation: 5761

Typescript reducer issue

I have the following:

...

type RepairsState = {
  data: Property[] /* Property is an object coming from another file */
}

type RepairsPropertyLoadAction = {
  type: typeof REPAIRS_PROPERTY_LOAD
  payload: { models: Property[] } /* the payload will return an object that has a models property of an array of objects that match my property type */
}

/* Reducer */
export const initialState: RepairsState = {
  data: [
    {
      id: '',
      jobNo: '',
      trade: '', 
      priority: '',
      status: '',
      raisedDate: new Date(),
      appointmentDate: new Date(), 
      completedDate: new Date(),
      description: ''
    }
  ]
}

export default function reducer(state = initialState, action: RepairsPropertyLoadAction): RepairsState {
  switch (action.type) {
    case REPAIRS_PROPERTY_LOAD:
      console.log(action.payload)
      return {
        ...state,
        data: action.payload
      }
    default:
      return state
  }
}

export const getRepairsProperty = (state: AppState) => state.repairs.data

...

Property class:

export default class Property {
  id: string = ''
  jobNo: string = ''
  trade: string = ''
  priority: string = ''
  status: string = ''
  raisedDate: Date = new Date()
  appointmentDate: Date = new Date()
  completedDate: Date = new Date()
  description: string = ''
}

however I am getting the following error:

Type '{ models: Property[]; }' is missing the following properties from type 'Property[]': length, pop, push, concat, and 28 more. TS2740

enter image description here

Upvotes: 2

Views: 198

Answers (2)

wentjun
wentjun

Reputation: 42516

You are missing the models property, which is defined as part of RepairsPropertyLoadAction. The reducer should be returning this instead:

return {
   ...state,
   data: action.payload.models,
}

Upvotes: 1

Alexander
Alexander

Reputation: 1380

The action returns an {models: Property []} object for the data, but the state has data: Property []

return {
   ...state,
   data: action.payload.model
}

Upvotes: 4

Related Questions