passing object to update one field in an array in redux

Question

I'm trying to pass an object data to action which should then update one field in an array of objcts in redux state. I've found this solution which is pretty similar to my question but i cant quite figure how to apply it to my situation here. here's my code:

Here's my reducer:

const initialState = {
  plfrm: {
    plfrm_collection: plfrm_collection,
    comment_collection: comment_collection,
    selected: [
      // {
      //     plfrm_selected_key: null,
      //     plfrm_selected_name: '',
      //     like: null,
      //     comment_selected: null
      // } 
      /* this should be the body of the selected object */
    ]
  }
}
export default function PaymentInfoReducer(state = initialState, action) {
  switch (action.type) {
    case PAYMENT_INFO_PARAMS_CHANGES_PLFRM:
      return update(state, {
        plfrm: {
          ...state.plfrm,
          selected: {
            [action.id]: update(...state.plfrm.selected[action.id], {
              $push: action.data
            })
          },
        },
      })
    default:
      return state
  }
}

Here's my action:

export function plfrmChange(id, data) {
    return {
        type: PAYMENT_INFO_PARAMS_CHANGES_PLFRM,
        id,
        data
    }
}

And when i pass it from the component, im doing it like this:

plfrmChange = (key, field, value) => {
    if(this.isPlfrmSelected(key)){ //item ald selected, update the [field]
        console.log('found')
        this.props.plfrmChange(this.findSelectedPlfrmIndex(key), {
            [field]: value
        })
    } else { //item not selected yet, so add new [field]
        console.log('not found')
        if(this.props.plfrm.selected.length === 0){ //if no item in array yet, index will b 0
            this.props.plfrmChange(0, {
                [field]: value
            })
        } else { //otherwise index will equal to length of array
            this.props.plfrmChange(this.props.plfrm.selected.length, {
                [field]: value
            })
        }
    }
}

and when i run i got this error:

TypeError: Cannot convert undefined or null to object
 60 | return update(state, {
  61 |     plfrm: {
  62 |         ...state.plfrm,
> 63 |         selected: {
  64 |             [action.id]: update(...state.plfrm.selected[action.id], {$push: action.data})
  65 |         },
  66 |     }

Im new to react, and i know my code is messy. Apology in advanced.

Can you use console.log to see what is the value of `state.plfrm.selected[action.id]` in your reducer? — blaz, Oct 05 '18 at 10:13

score 0 · Answer 1 · answered Oct 08 '18 at 00:01

The spread operator (...) can only be updated to an object or an array.

In your initial state, plfrm.selected is an empty array. Therefore, when you try to access state.plfrm.selected[action.id] for the first time, it will be undefined. Since you apply the spread operator in line 64, you got the error. You could do something like this to resolve the issue.

...(state.plfrm.selected[action.id] || {})

passing object to update one field in an array in redux

1 Answers1