Redux中修改state.active为false时，useEffect未触发的问题求助

问题详情 #

我遇到一个问题：Redux reducer将state.active设为false后，组件中依赖active的useEffect并未触发执行，但当active被设为一个新对象时，useEffect能正常执行。

已通过Redux Devtools确认state.active确实变为false，但useEffect仍未执行。相关代码如下：

Reducer代码 #

deleteNoteById: (state, action) => {
    //...
    state.active = false;
    //...
}

组件中的useEffect代码 #

const { active } = useSelector(state => state.journal);

useEffect(() => {
    // 需要执行的代码...
}, [active]);

正常触发useEffect的active值示例 #

{
    title: '',
    body: '',
    date: new Date().getTime(),
    imagesUrls: []
}

原因分析 #

问题核心在于违反了Redux的不可变更新原则，结合useSelector的浅比较机制共同导致：

1. Redux要求状态必须不可变，所有更新需返回新状态对象，不能直接修改原state。你在reducer中直接执行state.active = false，未改变state.journal的引用，Redux无法检测到状态变化。
2. useSelector默认用浅比较（===）判断是否更新组件。由于state.journal引用未变，useSelector认为前后选择出的{ active }无差异，不会触发组件重渲染，依赖active的useEffect自然不会执行。
3. 当你将active设为新对象时，大概率使用了正确的不可变更新方式（比如展开运算符创建新state），此时state.journal引用变化，useSelector检测到差异，组件重渲染，useEffect正常触发。

解决方案 #

修改reducer，遵循Redux不可变更新原则，返回新状态对象：

基础版本（单层状态结构） #

deleteNoteById: (state, action) => {
    // 用展开运算符创建新状态对象，保留原有属性并更新active
    return {
        ...state,
        active: false
    };
}

嵌套状态结构（深层属性场景） #

若state包含嵌套属性，需逐层展开创建新对象，确保所有层级的不可变性：

deleteNoteById: (state, action) => {
    return {
        ...state,
        // 示例：保留原有notes数组的副本
        notes: [...state.notes],
        active: false
    };
}

更简便方式：使用Redux Toolkit #

推荐用Redux Toolkit的createSlice，它内置Immer库，允许用“可变”写法编写reducer，底层自动生成不可变状态更新，避免手动处理展开运算符的繁琐：

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

const journalSlice = createSlice({
    name: 'journal',
    initialState: {
        active: null,
        notes: []
    },
    reducers: {
        deleteNoteById: (state, action) => {
            // 直接修改state，Immer自动处理不可变性
            state.active = false;
        }
    }
});

export const { deleteNoteById } = journalSlice.actions;
export default journalSlice.reducer;

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