Redux实现无限滚动切换页面后state未重置，返回首页不重新拉取帖子如何解决

问题根因 #

重置逻辑不生效的核心问题是RESET_POSTS动作在reducer中的处理逻辑写错了：

case PC.RESET_POSTS:
  return state; // 直接返回原状态，等于没有做任何修改，重置自然不会生效

同时还有两个配套逻辑问题会影响最终效果。

修复步骤 #

1. 修正reducer的重置逻辑 #

将RESET_POSTS的返回值改为初始状态，清空所有历史缓存的帖子数据：

case PC.RESET_POSTS:
  return { posts: [], loading: false, total: 0 };

2. 拆分首页useEffect逻辑 #

你当前的useEffect依赖了page参数，每次page变化时都会触发清理函数执行重置，会导致滚动加载第二页时先清空第一页的数据，不符合无限滚动需求。拆分为两个独立的useEffect即可：

// 仅负责拉取对应页码的帖子数据
useEffect(() => {
  dispatch(getPosts(page));
}, [dispatch, page]);

// 仅在组件卸载时执行状态重置
useEffect(() => {
  return () => {
    dispatch(resetPosts());
  };
}, [dispatch]);

page是首页组件内部的 useState，组件卸载再挂载时会自动重置为初始值1，不需要额外处理。

3. 可选：修正新帖插入顺序 #

你当前的新建帖子逻辑是把新内容追加到列表末尾，所以会出现在最底部，调整为插入到数组开头即可解决：

case PC.CREATE_POST:
  return { ...state, posts: [action.payload, ...state.posts] };

效果验证 #

修改完成后，离开首页时组件卸载会清空Redux中存储的历史帖子数据，再次返回首页时会从第一页开始重新拉取最新的全量帖子，无限滚动逻辑也可以正常运行。

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