React Redux useSelector Hook在Store更新后未触发重渲染问题

按优先级排查以下几个核心问题：

1. 确保Reducer返回全新的状态对象与数组引用 #

Redux通过引用变化判断状态更新，绝对不能直接修改原state或数组，必须返回全新引用。

错误写法（直接修改原数据）： #

case 'DELETE_HISTORY':
  // 直接修改原数组，引用未变
  state.history.splice(action.payload.index, 1);
  return state;

// 或修改原state对象
case 'DELETE_HISTORY':
  const newHistory = [...state.history];
  newHistory.splice(action.payload.index, 1);
  Object.assign(state, { history: newHistory }); // 污染原state
  return state;

正确写法（返回新对象+新数组）： #

用filter生成全新数组，同时解构原state创建新状态对象：

case 'DELETE_HISTORY':
  return {
    ...state,
    history: state.history.filter((_, idx) => idx !== action.payload.index)
  };

或用slice拼接新数组：

case 'DELETE_HISTORY':
  const { index } = action.payload;
  return {
    ...state,
    history: [
      ...state.history.slice(0, index),
      ...state.history.slice(index + 1)
    ]
  };

2. 检查mapStateToProps/useSelector的返回逻辑 #

如果用connect的mapStateToProps，确保直接返回store中的新数组，不要做不必要的引用共享：

const mapStateToProps = (state) => ({
  history: state.history // 直接取store数组，引用变化时props自动更新
});

如果用useSelector，避免在选择器中复用旧引用（比如不要缓存数组/对象）：

// 正确写法：直接获取数组
const history = useSelector(state => state.history);

3. 确认组件的更新配置 #

如果组件用了React.memo或PureComponent，确保浅比较能正常检测变化：

• 使用React.memo时，正确传入官方的shallowEqual（从react-redux或react工具函数导入）：

import { shallowEqual } from 'react-redux';
import React from 'react';

const HistoryList = React.memo(({ history, deleteHistory }) => {
  // 组件渲染逻辑
}, shallowEqual);

• 类组件用PureComponent时，只要history引用变化，就会自动触发重渲染，无需额外配置。

4. 验证Action是否正确触发 #

点击删除按钮时，确认dispatch确实执行了对应action，且type和payload（比如删除索引）正确。可以在reducer中加日志验证：

case 'DELETE_HISTORY':
  console.log('要删除的索引:', action.payload.index);
  console.log('原数组长度:', state.history.length);
  const newHistory = state.history.filter((_, idx) => idx !== action.payload.index);
  console.log('新数组长度:', newHistory.length);
  return { ...state, history: newHistory };

如果日志显示数组长度已变化但组件未更新，问题大概率出在组件的连接或更新逻辑上。

5. 推荐切换到Redux Toolkit简化逻辑 #

如果仍在用旧版Redux，建议换成Redux Toolkit——它内置Immer，允许直接“修改”状态（实际自动生成不可变新状态），彻底避免手动处理引用的麻烦：

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

const historySlice = createSlice({
  name: 'history',
  initialState: { list: [] },
  reducers: {
    deleteHistory: (state, action) => {
      // Immer自动处理不可变逻辑，直接写修改代码即可
      state.list.splice(action.payload.index, 1);
    }
  }
});

export const { deleteHistory } = historySlice.actions;
export default historySlice.reducer;

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