React函数组件中Redux数组状态变更后useEffect未触发问题

核心问题：Redux状态修改违反不可变性原则 #

你的useEffect未触发的根本原因是Reducer里直接修改了原数组的引用，导致Redux和React无法检测到状态变化：

• 在Reducer中，let trans = state.transactions;是直接引用原状态里的数组，trans.push(action.payload)修改的是原数组本身
• 虽然返回了{...state, transactions: trans}，但trans还是原来的数组引用
• React的useEffect依赖项采用浅比较，数组引用未变就会判定状态未更新，因此不会执行回调

修复步骤：修改Reducer，创建新数组 #

必须遵守Redux的不可变性规则，每次更新状态都要返回新的引用。把Reducer中的数组更新逻辑改成以下任意一种方式：

方案1：使用扩展运算符创建新数组

const initialState = {
  transactions : []
};

export default function(state = initialState, action) {
  switch (action.type) {
    case "ADD_TRANSACTION":
      console.log('ADD_TRANS', action.payload)
      // 创建新数组，包含原数组元素+新payload
      const newTransactions = [...state.transactions, action.payload]
      return {
        ...state,
        transactions: newTransactions
      };
    default:
     return state;
  }
}

方案2：使用concat方法

case "ADD_TRANSACTION":
  console.log('ADD_TRANS', action.payload)
  const newTransactions = state.transactions.concat(action.payload)
  return {
    ...state,
    transactions: newTransactions
  };

额外优化：useSelector配合shallowEqual #

修复Reducer后问题已解决，推荐在useSelector中使用shallowEqual，确保复杂状态的浅比较更可靠：

const transactions = useSelector(state => state.trans.transactions, shallowEqual);

验证效果 #

修改后，点击按钮添加交易时，Reducer会返回新的数组引用，useSelector会检测到transactions变化，触发useEffect执行dispatch(countTotal(transactions))，总和会自动更新。

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