如何在每次React组件开始渲染时重置Redux state

问题根因分析 #

• 你当前将不同路由页面的已加载帖子计数共用postReducer.loaded同一个字段，本身就会出现路由切换后状态互相污染的问题
• 之前用useEffect重置出现只能加载首批帖子，大概率是两个原因：
  1. useEffect的依赖项设置错误，比如没有指定空依赖，导致每次组件渲染/加载帖子后都会重复触发重置
  2. 重置操作和拉取帖子的操作时序不对，重置后没有正确触发对应页面的帖子拉取逻辑

方案1：优化Redux状态结构（更推荐，长期维护成本更低） #

把不同页面的loaded状态拆分存储，避免互相干扰：

// 修改后的postReducer结构
{
  postReducer: {
    ...state,
    // 首页关注流的loaded计数
    homeLoaded: 0,
    // 个人主页的loaded计数
    profileLoaded: 0,
    // 其他用户主页的loaded计数
    userLoaded: 0,
    posts: [],
    profilePosts: [],
    userPosts: []
  }
}

每个页面拉取对应列表时，只操作自己对应的loaded字段，无需在路由切换时执行重置逻辑，从根源避免状态冲突。

方案2：不修改现有结构，修正重置逻辑 #

如果你暂时不想改结构，可以按照以下步骤修正重置和拉取逻辑：

1. 给每个帖子列表页的useEffect设置正确的依赖项，仅在组件首次挂载时执行重置+拉取首批帖子的逻辑

// 以个人主页组件为例
import { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { resetLoaded, fetchProfilePosts } from '你的redux动作文件路径'

const ProfilePage = () => {
  const dispatch = useDispatch()
  const { loaded, profilePosts } = useSelector(state => state.postReducer)

  useEffect(() => {
    // 组件首次挂载时先重置loaded
    dispatch(resetLoaded())
    // 重置完成后再拉取首批帖子
    dispatch(fetchProfilePosts(0))
    // 空依赖保证仅首次挂载执行
  }, [dispatch])

  // 加载更多的逻辑
  const loadMore = () => {
    dispatch(fetchProfilePosts(loaded))
  }

  // 剩余组件逻辑
}

2. 确保你的fetchProfilePosts等异步拉取动作执行成功后，才累加loaded的值，避免重置后累加时机错误导致只加载首批
3. 若你使用的是react-router-dom v6，可以配合useLocation监听路由路径变化，在路由切换到帖子列表相关页面时判断是否需要重置：

const location = useLocation()
useEffect(() => {
  // 只有当路由是帖子列表相关页面时才重置
  if (['/home', '/profile', '/user'].includes(location.pathname)) {
    dispatch(resetLoaded())
  }
}, [location.pathname, dispatch])

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