React Redux最佳实践：切换博客帖子时Store数据该清理还是留存？

这个问题没有绝对的标准答案，得结合你的应用场景、数据量级和用户行为来选择，我给你拆解两种方案的利弊，帮你做决策：

方案一：保留数据，通过文章ID筛选 #

这是大多数应用的优先选择，尤其适合用户可能来回切换文章、或者单篇文章/评论数据量不大的场景。

优势： #

• 提升用户体验：用户返回之前看过的文章时，不需要重新请求API，能瞬间加载，避免等待。
• 减少服务器压力：重复的API调用会消耗服务器资源，缓存能有效降低请求量。

实现建议： #

把文章数据存在一个以ID为键的对象里，同时在Store中记录当前活跃的文章ID，切换时直接通过ID读取对应数据即可。比如Store的状态结构可以是这样：

const state = {
  // 缓存所有已加载的文章及评论
  cachedArticles: {
    '101': { id: 101, title: '...', content: '...', comments: [...] },
    '102': { id: 102, title: '...', content: '...', comments: [...] }
  },
  // 当前展示的文章ID
  currentArticleId: '101'
};

需要注意的问题： #

• 要避免内存无限增长：如果用户浏览大量文章，缓存的数据会越来越多。可以加个缓存清理策略，比如用LRU（最近最少使用）算法淘汰很久没访问的文章，或者当用户离开文章详情页回到列表页时，清空部分旧缓存。
• 处理数据过时：如果文章或评论可能被实时更新，可以给缓存数据加个过期时间，或者提供手动刷新按钮，让用户能主动获取最新内容。

方案二：移除旧数据，每次加载新数据 #

适合单篇文章/评论数据量极大、用户很少回退到旧文章，或者对数据实时性要求极高的场景（比如新闻类应用，文章随时可能更新）。

优势： #

• 内存占用低：不会积累大量闲置数据，尤其适合移动端等内存有限的设备。
• 数据绝对新鲜：每次切换文章都重新请求API，确保用户看到的是最新内容，不用处理缓存过期的问题。

实现建议： #

切换文章时，先清空Store中当前的文章和评论数据，然后发起新的API请求，加载完成后再更新Store。示例action代码：

async function switchToArticle({ commit }, articleId) {
  // 清空旧数据
  commit('RESET_ARTICLE_DATA');
  // 加载新数据
  try {
    const article = await api.fetchArticle(articleId);
    const comments = await api.fetchComments(articleId);
    commit('SET_ARTICLE_DATA', { article, comments });
  } catch (error) {
    // 处理请求失败的情况
    commit('SET_LOAD_ERROR', error);
  }
}

需要注意的问题： #

• 用户体验可能打折扣：每次切换都要等待加载，尤其网络不好的时候。可以加个加载动画、骨架屏来优化等待体验。

综合建议 #

如果没有特殊的性能或实时性要求，优先选方案一（缓存+ID筛选），再配合合理的缓存清理策略，这是平衡体验和性能的最优解。如果你的应用属于数据量极大或实时性要求极高的类型，再考虑方案二。

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