React+Redux Toolkit路由切换时状态累积不触发重渲染问题

状态持续累积的核心原因有两个：

• 现有setData reducer的逻辑仅支持向posts数组末尾追加单条内容，切换子版块拉取新数据前从未清空原有数组，旧帖子数据会一直残留在store中
• 组件拿到接口返回的帖子列表后，循环为每一条帖子单独触发dispatch，既没有在请求发起前重置状态，还会触发多次无意义的重渲染，性能很差。

第一步：调整Redux slice逻辑 #

废弃原有单条追加的reducer，新增整批替换帖子、统一管理加载状态的方法，修改后代码如下：

import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  posts: [],
  loading: false
}
export const dataSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: {
    // 直接覆盖替换整批帖子数据
    replaceAllPosts: (state, action) => {
      state.posts = action.payload
    },
    // 全局统一管理加载状态
    setLoading: (state, action) => {
      state.loading = action.payload
    }
  }
})

export default dataSlice.reducer;
export const { replaceAllPosts, setLoading } = dataSlice.actions;
export const selectPosts = state => state.data.posts;
export const selectLoading = state => state.data.loading;

Redux Toolkit内置Immer支持，直接给state赋值新数组即可，无需手动拷贝旧状态

第二步：重构组件请求逻辑 #

移除组件内单独维护的loading状态，拿到接口返回后先统一格式化所有帖子数据，一次性dispatch替换store内容，请求发起前主动清空旧数据避免切换闪屏：

import { useDispatch, useSelector } from 'react-redux';
import { useParams } from 'react-router-dom';
import { useEffect } from 'react';
import { replaceAllPosts, selectLoading, selectPosts, setLoading } from './store/dataSlice';
import FeedCard from './FeedCard';

export default function SubReddit() {
  const dispatch = useDispatch()
  const { name } = useParams()
  const url = `https://www.reddit.com/r/${name}.json`
  const posts = useSelector(selectPosts)
  const loading = useSelector(selectLoading)

  useEffect(() => {
    const postData = async () => {
      // 请求开始时开启加载态、清空旧数据
      dispatch(setLoading(true))
      dispatch(replaceAllPosts([]))

      try {
        const response = await fetch(url);
        if (response.status === 200) {
          const jsonResponse = await response.json();
          const rawPosts = jsonResponse.data.children
          // 统一格式化所有帖子数据，无需循环dispatch
          const formattedPosts = rawPosts.map((item) => ({
            id: item.data.id,
            title: item.data.title,
            author: item.data.author,
            comments: item.data.num_comments,
            subreddit: item.data.subreddit_name_prefixed,
            url: item.data.url,
            text: item.data.selftext,
            media: item.data.media,
            image: typeof item.data.preview !== 'undefined' 
              ? item.data.preview.images[0].source.url.replaceAll("amp;", "") 
              : null
          }))
          // 一次性写入整批帖子
          dispatch(replaceAllPosts(formattedPosts))
        }
      } catch (error) {
        console.log(error)
      } finally {
        dispatch(setLoading(false))
      }
    }

    postData()
  }, [url, dispatch])

  return (
    <div className="feed-container">
      {loading && <div className="loading-tip">内容加载中...</div>}
      {!loading && posts.map(post => (
        <FeedCard 
          key={post.id} 
          image={post.image} 
          title={post.title} 
          url={post.url} 
          media={post.media} 
          text={post.text} 
          author={post.author} 
          comments={post.comments} 
        />
      ))}
    </div>
  )
}

• 原代码在请求成功、请求失败、finally块中重复设置loading状态，统一放到finally块处理即可
• 原代码使用replace("amp;", "")只会替换匹配到的第一个字符串，改用replaceAll可以清除所有转义残留的amp;字符
• 批量更新store数据只会触发一次组件重渲染，相比循环dispatch单条数据性能提升明显

编辑说明：已补充slice相关代码*

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