Как мне обновить состояние Redux в приложении React?

Question

Я работаю над проектом React, и у меня есть раздел с «Сохраненными играми».

Раздел «Сохраненные игры» отображает состояние «Сохраненные игры».

ЭтоВот как это выглядит:

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}
    />
  ));
}

Когда я пытаюсь удалить игру, она удаляет случайную, а не ту, на которую я нажал, или несколько игр одновременно.

Это то, что«GameCard» (там, где кнопка удаления) выглядит следующим образом:

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

И вот как я пытаюсь изменить состояние в Редукторе:

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

Редактировать: Отправка в реквизит:

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

Я также заметил, что последняя игра в списке не может быть удалена, состояние обновлено, но компонент не отображается повторно, поэтому он не исчезает.

Что-тов редукторе наверное не так, как вы думаете?

Answer 1

Я думаю, что ваша проблема в том, что возвращаемое значение сплайса - это массив удаленных игр, попробуйте что-то подобное (обратите внимание, вы также можете использовать метод фильтра):

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

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

также я думаю, что этоВам лучше использовать ключ игры, чтобы удалить его, а не заголовок, если заголовок не уникален