Redux复用组件问题：跨页面使用Post组件时点赞删除状态不更新如何解决？

问题根因 #

你当前的Redux状态存在数据冗余问题：postReducer存储首页的帖子列表，userReducer单独存储个人页的用户帖子列表，两套数据完全独立维护。你现有的点赞、删除action仅修改了postReducer中的数据，没有同步更新userReducer里的对应帖子条目，所以Profile页的UI不会触发重渲染，只有刷新页面重新拉取userReducer的列表时才会显示最新结果。

解决方案 #

方案1：统一帖子数据源（优先推荐） #

这是最符合Redux最佳实践的写法，从根源避免数据多份存储导致的同步问题

• 全站所有帖子的基础数据统一存储在postReducer中，采用对象结构存储，key为帖子ID，value为对应帖子的完整数据
• HomePage和ProfilePage各自的列表仅存储当前页面需要展示的帖子ID数组，渲染时通过ID从postReducer中匹配对应的帖子数据
• 后续点赞、删除操作仅需要修改postReducer中对应ID的帖子数据，所有引用该帖子的页面都会自动同步更新，无需额外的同步逻辑

方案2：双reducer同步更新 #

如果暂时不想重构现有状态结构，可以通过同步修改两份数据的方式修复问题：

• 点赞/删除接口请求成功后，要么同时dispatch两个分别对应更新postReducer和userReducer的action，要么让两个reducer都监听同一个点赞/删除的action type，各自更新自身存储的帖子列表中对应的数据

关于Redux connect的说明 #

你搜到的旧版connect高阶组件在当前Redux版本中依然可以正常使用，但如果你的项目用的是函数组件，更推荐用Redux官方现在主推的useSelector、useDispatchhook，写法更简洁。你当前遇到的问题和使用connect还是hook无关，核心是状态结构设计的问题，和组件获取状态的方式没有关联。

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