Successful PUT request, but React, Redux app crashes

Question

I have a React, Redux app which should work as a CRUD application. And a part of a CRUD application is the ability to update stuff and that's what I currently have trouble with. The PUT request works (can see the changes in Robomongo), but my app crashes afterwards and the problem lies in my reducer; Unhandled Rejection (TypeError): Cannot read property 'item' of undefined (yeah, item is not the best naming, sorry).

I'd like to walk you through the process of the PUT request, because code > text after all.

I will start where my action is created, because I guess you can figure out I have a form as my legit starting point.

So, here's my action (sorry for the wall of code)

Action:

import axios from 'axios'
import settings from '../../../../settings'
import { merge } from 'lodash'

axios.defaults.baseURL = settings.hostname

export function updateSettings(id, updatedValues, controller, door) {
  const custom_name = updatedValues.custom_name
  const location = updatedValues.location
  const open_duration = updatedValues.open_duration
  return (dispatch, getState) => {
    const state = getState()
    const door = state.fetchDoors.doors.find(val => val._id === id.itemId)
    const controller = state.fetchDoors.controllers.find(
      controller => controller._id === door.controller
    )
    console.log('door', door) // Returns updated object
    console.log('controller', controller) // Returns updated object

    const doorPayload = {
      ...door,
      custom_name,
      location
    }

    const controllerPayload = {
      ...controller,
      open_duration
    }

    axios
      .put(`${settings.hostname}/locks/${id.itemId}`, doorPayload)
      .then(res => {
        dispatch({ type: 'DOOR_UPDATING' })
        dispatch({
          type: 'DOOR_UPDATED_SUCCESS',
          doorPayload
        })
      })

    axios
      .put(
        `${settings.hostname}/controllers/${door.controller}`,
        controllerPayload
      )
      .then(res => {
        dispatch({ type: 'CONTROLLER_UPDATING' })
        dispatch({
          type: 'CONTROLLER_UPDATING_SUCCESS',
          controllerPayload
        })
      })
      .catch(err => console.log(err))
  }
}

And here's my reducer

Reducer:

const initialState = {
  isLoading: false
}

export const settings = (state = initialState, action) => {
  switch (action.type) {
    case 'DOOR_UPDATING':
      return { ...state, isLoading: true }

    case 'DOOR_UPDATED_SUCCESS':
      return { ...state, item: action.payload.item, isLoading: false } // Here's where the error occurs

    case 'CONTROLLER_UPDATING':
      return { ...state, isLoading: true }

    case 'CONTROLLER_UPDATING_SUCCESS':
      return { ...state, item: action.payload.item, isLoading: false }
    default:
      return state
  }
}

So the error occur inside of my reducer (I've added a comment) and I really don't understand why, now when the PUT request changes the data inside of my database. I assume there's something silly I'm missing, but I can't fix it. All help is really appreciated and if more code/ info needed just let me know.

Thanks for reading.

Edit:

Here's how my door object looks like:

Answer 1

In your reducer you are expecting and action with the shape of:
{type: 'something', payload: 'something else'}
But when you dispatch the action you don't have a property of payload.
this is what you are dispatching:

{
  ...door, // this will spread all properties of door (which doesn't have a property with the name payload)
  custom_name,
  location
}

Then you are trying to access action.payload.item hence you get the error:

Cannot read property 'item' of undefined

payload is never defined in your action (by the way nor item was).