Redux Toolkit 按ID删除状态数组项不生效，求代码问题排查

• 第一个问题：添加收藏时传入的payload结构嵌套了多余层级
  你调用addMovie时传入的是{ movie }，也就是实际存入favoriteMovies数组的每个元素都是{ movie: 电影原始对象 }的嵌套结构，reducer删除逻辑里直接取movie.imdbID是拿不到值的，实际需要movie.movie.imdbID才能取到ID。
• 第二个问题：删除时传入的payload格式和reducer接收逻辑不匹配
  你调用removeMovie时传入的是{ imdbID }，此时action.payload是{ imdbID: '你的ID值' }的对象，而reducer里直接把这个对象和数组元素的imdbID字符串做全等比对，结果永远为假，过滤逻辑不会删除任何元素，这就是删除不生效的核心原因。
• 重复新增的原因也很简单：删除操作没有生效，原数组里的对应项一直存在，再次触发添加逻辑就会多插入一条相同的记录。

方案1：修改调用逻辑，保持reducer简洁（推荐） #

修改dispatch触发部分的代码即可：

const handleAddFavorite = () => {
  // 去掉多余的对象包裹，直接传movie对象
  dispatch(addMovie(movie));
  setIsFavorite(true);
};
const handleRemoveFavorite = () => {
  // 去掉多余的对象包裹，直接传imdbID字符串
  dispatch(removeMovie(imdbID));
  console.log(imdbID);
  setIsFavorite(false);
};

修改后存入数组的元素就是原生的电影对象，删除时传入的payload是纯ID字符串，原有reducer逻辑可以直接正常运行。

方案2：调整reducer适配现有传参 #

如果不想修改调用逻辑，也可以调整reducer代码：

reducers: {
  addMovie: (state, action) => {
    // 取出嵌套的movie对象存入数组
    state.favoriteMovies = [...state.favoriteMovies, action.payload.movie];
  },
  removeMovie: (state, action) => {
    // 取出嵌套的imdbID做比对
    state.favoriteMovies = state.favoriteMovies.filter(
      (movie) => movie.imdbID !== action.payload.imdbID
    );
  },
}

内容的提问来源于stack exchange，提问作者Daniels0n