React item won't remove from array

Question

I have this code here:

const favouriteMovies = (state = initialState, action) => {
  switch(action.type) {
    case 'setMovieToFavourites': return {
      ...state,
      hearted: [...state.hearted, action.movie]
    }
    default: return state;
  }
}

const unlikeMovie = (state = initialState, action) => {
  switch(action.type) {
    case 'unlikeMovie': return {
      ...state,
      hearted: state.hearted.filter(item => item !== action.movie),
    }
    default: return state;
  }
}

So the first function favouriteMovies adds movies to array and with the second function I want to remove the movie from the hearted movies. In the unlikeMovie function I get the movieID which equals to the one of the liked movies but it won't remove the movie from the hearted state. Why it isn't removing ?

You compare movie objects directly, not their IDs. If object reference changes over time with other updates, that may be the cause of the problem. — Ivan Kashtanov
– Ivan Kashtanov, Commented Nov 10, 2019 at 22:17
Have you tried to see what state.hearted.filter(item => item !== action.movie) returns? Maybe move the code and assign the result to a variable to make sure it's doing what you expect. Also, any chance that unlikeMovie isn't the action type that's being created? — bernieslearnings
– bernieslearnings, Commented Nov 10, 2019 at 22:19
Can you please show some more code? If your action.movie is the id then the returned state should be filtered — Rasso
– Rasso, Commented Nov 10, 2019 at 22:24

automasean · Accepted Answer · 2019-11-10 22:19:56Z

2

Looks like you might need to compare the IDs to filter out the movie in the unlikeMovie function.

Hard to tell for sure without knowing more about the structure of the movie object but assuming action.movie is the same type of object as item in your code sample and they both share an ID property of movieID, something like this should work:

const unlikeMovie = (state = initialState, action) => {
  switch(action.type) {
    case 'unlikeMovie': return {
      ...state,
      hearted: state.hearted.filter(item => item.movieID !== action.movie.movieID),
    }
    default: return state;
  }
}

Hope this helps!

answered Nov 10, 2019 at 22:19

automasean

4313 silver badges9 bronze badges

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

9 Comments

frenchbaguette Over a year ago

movie only have value of movie id. Only numbers

automasean Over a year ago

I see, thanks. Can you confirm with a console.log or debugger statement that action.movie has the value of the ID you're expecting? Just wondering if it has something to do with how the action is being dispatched.

frenchbaguette Over a year ago

Console logger: setMovieToFavourites", movie: 475557 unlikeMovie", movie: 475557

bernieslearnings Over a year ago

Can you log the hearted array before the filter?

frenchbaguette Over a year ago

favouriteMovies: hearted: (3) [475557, 290859, 420818]

|

Bmaed Riasbet · Accepted Answer · 2019-11-10 23:00:12Z

1

Can you check this code ?

const movies = (state = initialState, action) => {
  switch(action.type) {
    case 'setMovieToFavourites': return {
      ...state,
      hearted: [...state.hearted, action.movie]
    }

    case 'unlikeMovie': return {
      ...state,
      hearted: state.hearted.filter(item => item !== action.movie),
    }
    default: return state;
  }
}

export default movies;

edited Nov 10, 2019 at 23:00

answered Nov 10, 2019 at 22:52

Bmaed Riasbet

15.1k9 gold badges42 silver badges57 bronze badges

4 Comments

frenchbaguette Over a year ago

Wooorks! Thanks!!

Bmaed Riasbet Over a year ago

:) Happy for you !

frenchbaguette Over a year ago

It;s because there was two seperate functions with initalState ?

Bmaed Riasbet Over a year ago

All your requests to unlike a movie are captured with first reducer. the name of it doesn't matter (favouriteMovies in your case, movies in my case) because redux search for an action type that match ( unlikeMovie in this case). so your requests stop at default: return state; of first reducer. Hope it's clear :). upvote if answer and comment help!

Collectives™ on Stack Overflow

React item won't remove from array

2 Answers 2

9 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related