0

I display in a component some movies that I get with an API call and a .map method. When I try to delete an item into this list of movies, the deletion is only done on the last item. I use the splice() method and I give an index to my deleteMovieFromFav() function. I don't know what I'm missing.. Would anyone know how to do it?

the function for delete a movie:

deleteMovieFromFav = (idx) => {
    let { movies } = this.props.movieReducer;
    movies.splice(idx, 1)
    this.setState({movies: [...movies]})
}

onClick for delete a movie:

{
 this.props.movieReducer.movies.map((movie, idx) => {
  return(
   <div key={idx}>
    <Snackbar
      action={[
       <Button key="undo" color="secondary" size="small" 
        onClick={() => {
         this.deleteMovieFromFav(idx)
         this.handleCloseAlert()
        }}> Yes
       </Button>,
       <Button 
        key="no" 
        color="secondary" 
        size="small" 
        onClick={() => this.handleCloseAlert()}>
      ]}
    />
  </div>
 )
})
}
  • 2
    Splicing a reducer makes no sense. A reducer is a function, splice operates on arrays. What does `movies` actually give you? – jmargolisvt Sep 19 '19 at 14:49
  • @jmargolisvt seems like you are getting hung up over a variable name? – epascarello Sep 19 '19 at 14:52
  • So why are you using props for the map, but using state? Seems like you have a mismatch going on here. – epascarello Sep 19 '19 at 14:56
  • because when you update it you show pass it to `mapDispatchToProps` not to your local state – Joseph Sep 19 '19 at 14:56
  • I use a reducer because i display all the movies of the API in a component, a button then allows you to add movies to a favorite component and in this case, the movies added here are the favorite movies. So in my `deleteMovieFromFav()` function, the `movies` variable corresponds to the movies added as favorites. I hope I've made it clear.. –  Sep 19 '19 at 15:12
  • i understand you correct in your favorite component you have in it's state only the favorite and when you delete you should delete from local store not the public one so you need yo pass `id` of this movie from your local state not the global state – Joseph Sep 19 '19 at 15:27
  • I think you are not so clear about redux flow and how it works. Look for some examples on web. And reason behind your code not working is you are not dispatching any action to change a movies props whereas you are just taking from props and changing the state but your render is showing props( in short, you are showing props but changing state) . P.S @Joseph is right. – saurssaurav Sep 19 '19 at 15:44
  • @saurssaurav Indeed I really not so clear about redux and how it works. This is all new to me and I'm lost hahah. I will try to look for examples and read the documentation to better understand how redux works. I think I have understood the Joseph 's method that I will try to make work. Thanks a lot for your answers. –  Sep 19 '19 at 15:55
  • @Бастьен if you really want to understand redux check this [courses](https://egghead.io/redux). They are the best to understand the ins and outs of redux. – Johnny Zabala Sep 19 '19 at 16:15
  • Thank you @JohnnyZabala for this courses. –  Sep 20 '19 at 07:08
  • I am glad I can help :D @Бастьен – Johnny Zabala Sep 20 '19 at 10:49
  • @JohnnyZabala Unfortunately I don't speak English well and I really don't understand everything about these videos... Hahah React and Redux are out to get me !! –  Sep 20 '19 at 13:20

1 Answers1

0

I used redux and I created an action for delete a movie from favorites, and now it is the first element that is deleted.. I would like my deleteMovie action to act on the id of the movie that has been added as favorites but I have access to this id only in the .map and not in redux..

movieReducer here:

import { DELETE_MOVIE } from '../actionType/movies'

const initialState = {
  movies: []
};

export default (state = initialState, action) => {
  switch(action.type){
    case DELETE_MOVIE: 
      let selectedMovies = state.movies
      selectedMovies.splice(action.payload, 1)
      return {...state, movies: [...selectedMovies]};
    default:
      return state;
  }
}

movieActions here:

import { ADD_MOVIE, DELETE_MOVIE } from '../actionType/movies'
export const deleteMovie = (movie) => {
  console.log('movieid', movie)
  return {
    type: DELETE_MOVIE,
    payload: movie
  }
}