Redux点赞列表移除元素后UI未同步更新问题求助

嘿，我一眼就发现问题的核心了——你的Redux Reducer在处理REMOVE_LIKED_PRODUCT动作时，直接修改了原state数组，这违反了Redux的不可变更新原则，导致组件无法感知到状态变化！

问题根源：Reducer中的可变操作 #

看你的Reducer代码：

case REMOVE_LIKED_PRODUCT: 
  state.splice(state.indexOf(action.product), 1); 
  return state;

splice()是一个会修改原数组的方法，你虽然最后返回了state，但这个state的引用和之前的完全一样。Redux和React的更新机制依赖于状态的引用变化来判断是否需要重新渲染组件，所以即使你在Redux DevTools里看到状态确实变了，Header组件也不会触发重新渲染，自然liked.length就不会更新。

修复方案：使用不可变的方式更新state #

你需要创建一个新的数组来返回，而不是修改原数组。有两种常用的方式：

方式1：使用filter方法推荐 #

filter会返回一个新数组，包含所有符合条件的元素，非常适合这种移除操作：

case REMOVE_LIKED_PRODUCT: 
  return state.filter(item => item !== action.product);

方式2：使用扩展运算符复制数组后修改 #

先复制原数组的副本，再对副本进行操作，最后返回副本：

case REMOVE_LIKED_PRODUCT: 
  const newState = [...state]; 
  newState.splice(newState.indexOf(action.product), 1); 
  return newState;

另外，顺便提一下你的SET_LIKED_PRODUCT动作，concat是没问题的，但用扩展运算符写法会更统一：

case SET_LIKED_PRODUCT: 
  return [...state, action.product];

额外检查点 #

除了Reducer的问题，你还要确认以下两点：

• LikeProduct组件中的setLikedProducts和removeLikedProduct是不是通过mapDispatchToProps正确绑定了Redux的dispatch方法？比如：

  const mapDispatchToProps = dispatch => ({
    setLikedProducts: product => dispatch(setLikedProduct(product)),
    removeLikedProduct: product => dispatch(removeLikedProduct(product))
  });
  export default connect(null, mapDispatchToProps)(LikeProduct);
  

• Header组件的mapStateToProps是不是正确把Redux中的点赞列表映射到了liked props？比如：

  const mapStateToProps = state => ({
    liked: state.likedProducts // 这里要和你的store中reducer的key对应
  });
  export default connect(mapStateToProps)(Header);
  

总结 #

只要把Reducer中的可变操作改成不可变的方式，组件就能正确感知到Redux状态的变化，Header里的liked.length就会同步更新啦！

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