Typescript reducer issue

Question

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

Alexander · Accepted Answer · 2020-01-07 18:27:53Z

4

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

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

answered Jan 7, 2020 at 18:27

Alexander

1,4408 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

wentjun · Accepted Answer · 2020-01-07 18:33:40Z

1

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

edited Jan 7, 2020 at 18:33

answered Jan 7, 2020 at 18:27

wentjun

42.8k10 gold badges108 silver badges116 bronze badges

Collectives™ on Stack Overflow

Typescript reducer issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related