我应该如何在我的 React 应用程序中更新 Redux state？

Question

I'm working on a React project, and I have a section with "Saved Games".

The "Saved Games" section maps the "Saved Games" state.

This is what it looks like:

let SavedGamesList = <h1>Loading...</h1>;
if (this.props.savedGamesState.length < 1) {
  SavedGamesList = <StyledNotSavedGames>Such empty</StyledNotSavedGames>;
}

if (this.props.savedGamesState.length >= 1) {
  SavedGamesList = this.props.savedGamesState.map(game => (
    <GameCard
      key={game.game}
      title={game.title}
      hoursViewed={game.hours_viewed}
      saved={true}
    />
  ));
}

When I try to delete a game, it deletes a random one not the one I clicked, or multiple games at once.

This is what the "GameCard" (Where the delete button is) looks like:

deleteGame = () => {
  let gameName = this.props.title;
  this.props.deleteGame(gameName); //This is the Redux dispatch
  console.log(this.props.savedGamesState);
};

And this is how I try to change the state in the Reducer:

  case actionTypes.DELETE_GAME:
    let updatedGames = [
      ...state.savedGames.splice(
        state.savedGames.findIndex(e => e.title === action.payload),
        1
      )
    ];
    return {
      ...state,
      savedGames: updatedGames
    };

Edit: Dispatch to props:

deleteGame: (res) => dispatch({type: actionType.DELETE_GAME, payload: res})

I also noticed that the last game in the list can't be deleted, the state updated but the component doesn't re-render so it's not disappearing.

Something in the reducer probably is wrong, what do you think?

Answer 1

I think your problem is that the return value of splice is the array of removed games, try something like that (note you can also use the filter method):

    case actionTypes.DELETE_GAME:{
        let updatedGames = [
          ...state.savedGames
        ];
        updatedGames.splice(
            updatedGames.findIndex(e => e.title === action.payload),
            1
        )

        return {
          ...state,
          savedGames: updatedGames
        };
}

also I think it is better for you to use the key of the game to remove it and not the title unless the title is unique