Redux useSelector不响应state更新、组件未重新渲染问题排查

问题原因 #

你的问题核心是Reducer处理ADD_ARTICLE动作时违反了Redux的不可变性原则：
你虽然通过...state复制了外层的state对象，但内部的articles数组仍然复用了原state中的引用，调用push方法属于原地修改原数组，并没有生成新的数组引用。
而useSelector默认对返回值做浅比较，检测到articles的引用和上一次渲染时完全一致，就会判定状态无变化，不会触发组件重渲染。Redux DevTools可以检测到更新是因为它会做深度状态对比，所以能识别到原地修改的内容。

修复方案 #

修改Reducer中ADD_ARTICLE分支的逻辑，直接返回包含新数组的全新state：

const reducer = (
  state: ArticleState = initialState,
  action: ArticleAction
): ArticleState => {
  switch (action.type) {
    case actionTypes.ADD_ARTICLE:
      const newArticle: IArticle = {
        id: Math.random(), // 生产环境建议替换为更可靠的唯一id生成方案
        title: action.article.title,
        body: action.article.body,
      };
      return {
        ...state,
        // 基于原数组生成新数组，不做原地修改
        articles: [...state.articles, newArticle]
      };
    case actionTypes.REMOVE_ARTICLE:
      const newArticles = state.articles.filter(
        (article) => article.id !== action.article.id
      );
      return {
        ...state,
        articles: newArticles,
      };
    default:
      return state;
  }
};

补充说明 #

• Reducer中禁止所有原地修改操作，包括数组的push/pop/splice、对象的属性直接赋值等，所有状态变更都需要返回全新的对象/数组实例
• 你现有的REMOVE_ARTICLE分支逻辑是符合不可变性要求的，filter方法会返回新数组，所以删除操作可以正常触发UI更新

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