React+Redux开发LMS应用时是否需要在切换页面时清理store内的API返回数据？

两种核心方案的优劣势对比 #

没有绝对的最优解，需要结合你的业务场景、数据体积、用户使用习惯灵活选择：

• 全量留存所有拉取到的数据
  • 优势：
    • 避免重复请求：用户返回上一级页面时可以直接读取缓存，不需要重新调用接口，页面加载速度更快，也能节省服务器带宽成本
    • 支持跨页面数据复用：如果后续有其他页面需要用到课程列表、课时基础信息等数据，不需要重复发起请求
  • 劣势：
    • 内存占用持续上涨：如果用户长时间使用应用、浏览大量课程/课时，store 中的冗余数据会持续堆积，极端情况可能导致页面卡顿甚至崩溃
    • 存在数据时效性风险：如果后端更新了课程/课时信息，用户不刷新页面就会一直拿到旧的缓存数据
• 切换页面即清理对应数据
  • 优势：
    • 内存占用极低：store 中永远只存储当前页面需要的数据，不会出现冗余数据堆积的问题
    • 数据时效性强：每次进入页面都会重新拉取接口，保证展示的是后端最新数据
  • 劣势：
    • 重复请求较多：用户频繁来回切换页面时会重复发起相同请求，加载体验差，也会造成不必要的服务器资源浪费

针对 LMS 场景的具体建议 #

你提到的「课程列表→课程详情（课时列表）→课时详情（视频/补充信息）」的层级浏览场景，建议采用分层缓存+过期清理的折中方案，比全留/全删两种极端方案都更实用：

• 低频更新的上层数据长期留存：比如课程列表、基础课时信息这类不会频繁变更的数据，拉取后可以在 store 中留存 1~7 天（可自行设置 TTL 过期时间），用户短时间内返回上一级页面直接读取缓存，超过有效期再重新拉取。如果你的应用用户单次使用时长普遍不超过 2 小时，数据量不大，这类数据甚至可以一直留存到用户刷新页面前，不需要做额外清理。
• 大体积/高频更新的下层数据用完即删：比如课时的视频播放凭证、实时学习进度统计这类时效性强、或者体积较大的数据，在退出课时详情页时就直接清理出 store，避免占用多余内存。

清理 Store 数据的实现参考 #

如果你使用 Redux Toolkit 开发，可以给对应 slice 增加 reset 动作，在页面卸载时触发即可：

// lessonDetail slice 定义
import { createSlice } from '@reduxjs/toolkit'

const lessonDetailSlice = createSlice({
  name: 'lessonDetail',
  initialState: null,
  reducers: {
    setLessonDetail: (state, action) => action.payload,
    resetLessonDetail: () => null
  }
})

export const { setLessonDetail, resetLessonDetail } = lessonDetailSlice.actions
export default lessonDetailSlice.reducer

// 课时详情页调用清理逻辑
import { useEffect } from 'react'
import { useDispatch } from 'react-redux'
import { resetLessonDetail } from '@/store/slices/lessonDetail'

function LessonDetailPage() {
  const dispatch = useDispatch()
  
  useEffect(() => {
    // 页面卸载时触发数据清理
    return () => {
      dispatch(resetLessonDetail())
    }
  }, [dispatch])

  // 页面其他业务逻辑
}

如果你使用 RTK Query 这类 Redux 官方提供的数据请求工具，本身已经内置了缓存 TTL、自动清理缓存的配置项，不需要手动编写清理逻辑。

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