Unhandled Rejection (TypeError): state.recipes is undefined

Just a heads up this is fullstack app involving React, Redux, and Ruby on Rails.

I am just trying to delete an item on my page. When I delete the item I get this Unhandled Rejection (TypeError): state.recipes is undefined message pointing to my reducer. When I refresh my page, the object is gone and the error disappears. The question is what is causing this error prior to the item deleting?

This is what happens after I click delete button, when I refresh the page the object is gone.

Here is my delete reducer(just a snippet fyi)

case 'DELETING_RECIPE_START': 
            return {
            ...state.recipes, 
            loading: true 
            }

        case 'DELETE_RECIPE_SUCCESS':
            
This line ----->  const recipes = state.recipes.filter(recipe => recipe.id !== action.payload.recipeId)
            
            return {
                ...state, recipes,
               loading: false
            
            }

I was told in this case is to check your delete action on the backend. When I plugged in byebug, It is showing me which object am trying to delete, so hopefully its nothing there I need to worry about.

def destroy
      
        recipe = Recipe.find(params[:id])
        
        unless recipe.nil?
      
          recipe.destroy
          render json: recipe
        else
          render json: { error: "Property not found" }, status: 404
        end
    end
    

I did modify my delete action to the thunk asynchronous conventions, and I hope it’s structured correctly. I will note when I run debugger before the return(dispatch) this issue with my error seems to happen after the return(dispatch) line.

export const deleteRecipe = (recipeId) =>{
    const BASE_URL = `http://localhost:3001`
    const RECIPES_URL =`${BASE_URL}/recipes`

    const config ={
        method: 'DELETE', 
        headers: { 
            'Content-type': 'application/json'
        }
    }
   
    return (dispatch) => {
        
        dispatch({ type: "DELETING_RECIPE_START" })
        fetch(`${RECIPES_URL}/${recipeId}`,config)
          .then(response =>{return response.json()})
          .then(recipeId =>  dispatch({ type: 'DELETE_RECIPE_SUCCESS', payload: recipeId }))
          .catch((error) => {throw(error)})
    };

}



Lastly here is my Recipe component with the delete button and the event handler associated.

class Recipe extends Component {
   
    handleOnClick(){
        this.props.deleteRecipe(this.props.recipe.id);
      }

    render(){
        
        return(
            <div>
            <h3>Name: {this.props.recipe.name}</h3>
            <p>Category:{this.props.recipe.category_id}</p>
            <p>Chef Name: {this.props.recipe.chef_name}</p>
            <p>Origin: {this.props.recipe.origin}</p>
            <p>Ingredients: {this.props.recipe.ingredients}</p>
            <button onClick={()=>this.handleOnClick()}>Delete</button>
            </div>
             
        )
    }

}

export default Recipe

What can I do to correct this? I’ve been stuck on this for days and it was difficult finding descent answer for this online.
Thank you in advance

Should that be an array?

It is
Array Array2

Yes, but what about the syntax? Should it be spread into an array?

[...state.recipes]

So i did try that…and it brought me back to a previous issue
I was having. I hit the delete button, but it did not update the state immediately. I had to refresh the page manually for it to disappear.

Looks like it is above my pay grade, like you suggested at the start. It was a stab.

in deleteRecipe.js file line 11, payload should be an object with a property called “recipeId” so just change it to
payload: { recipeId: recipeId }
or you can just write payload: { recipeId } .

please, notify me if the error still exists so we can make some checks because I can’t see the full code to figure out if there is another error or not.

I appreciate your input nonetheless

1 Like

The same error occurs unfortunately. I’ll share my repo with you if you want to see it. 'll understand if you are not able to look at it extensively.

1 Like

For those interested in the solution. I credit my cohort lead for this. There was some restructuring involved.

When debugger is placed in my it’ll indicate that a key is not provided for recipes…well here is what it meant.

My DELETE_RECIPE_START case was like this at first

case 'DELETING_RECIPE_START': 
            return {
            
            ...state.recipes, 
            loading: true 
            }

It needed to look likes this

case 'DELETING_RECIPE_START': 
            return {
            
            recipe:[...state.recipes], 
            loading: true 
            }


The recipe is the key while its current state is the value

The next part blew my mind…The delete action did not need a json response. You are only telling it to delete an id and that s it.

export const deleteRecipe = (recipeId) =>{
    const BASE_URL = `http://localhost:3001`
    const RECIPES_URL =`${BASE_URL}/recipes`

    
   
    return (dispatch) => {
        fetch(`${RECIPES_URL}/${recipeId}`, { method: 'DELETE' })
            .then(() => {
                return dispatch({ type: 'DELETE_RECIPE_SUCCESS', payload: recipeId })
            });
    };

}

I am really trying to get better at this but I enjoy the fact that I am learning.a

1 Like

So we were close…

1 Like

Yes sir we were very close!

1 Like