使用React Redux传值时组件仅渲染一次，数据更新不触发重渲染

根因定位 #

你遇到的是Redux状态更新不触发组件重渲染的典型场景，核心问题是你在reducer中修改状态时直接操作了原状态的引用，没有返回全新的状态对象：
React和Redux对状态更新的默认比较逻辑是浅比较，只会对比状态的引用地址，不会深层比对内部内容。你如果直接对原FavoritesData.data做push、splice、修改元素属性这类操作，数组的引用地址没变，组件就会判定状态没有更新，自然不会触发重渲染。
你在VSCode保存代码时触发热重载，会强制重新渲染整个组件，直接读取最新的状态内容，所以此时显示才会正常，完全符合直接修改原状态的特征。

修复方案 #

1. 首先修改reducer中更新FavoritesData的逻辑，所有状态修改都要返回全新的对象/数组，不要修改原状态：

// 错误写法：直接修改原数组，引用不变
state.data.push(newFavItem)
return state

// 正确写法：返回新对象，内部数组也用扩展运算符生成新数组
return {
  ...state,
  data: [...state.data, newFavItem]
}

// 删除、修改数组项同理，用filter、map等返回新数组的方法
return {
  ...state,
  data: state.data.filter(item => item.id !== deleteId)
}

2. 检查组件内获取Redux状态的写法是否正确，函数组件必须用useSelector订阅状态变化，不要直接从store取静态值：

// 正确写法：useSelector会订阅状态变化，更新时自动触发重渲染
import { useSelector } from 'react-redux'
const FavoritesData = useSelector(state => state.favorites)

// 错误写法：只在组件初始化时取一次值，后续状态更新不会同步
const FavoritesData = store.getState().favorites

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