如何在React Redux应用中使用deep-freeze深度冻结Redux状态？

deep-freeze的核心作用就是冻结对象或数组，一旦被冻结，任何试图直接修改它的操作都会抛出错误——这完美契合Redux「状态不可突变」的核心原则，能帮你快速定位代码中意外的状态修改行为。下面是具体的实现步骤：

1. 安装deep-freeze库 #

首先只在开发环境安装依赖（生产环境不需要这个检查工具，避免性能开销）：

npm install deep-freeze --save-dev
# 或者用yarn
yarn add deep-freeze --dev

2. 在Redux Reducer中集成deep-freeze #

Redux的reducer是纯函数，我们需要在开发环境下，对reducer接收的原始state和返回的新状态进行冻结。这样只要出现直接修改原状态的操作，就会立刻触发报错。

方式一：直接在单个reducer中使用 #

import deepFreeze from 'deep-freeze';

const initialState = {
  todos: [],
  filter: 'all'
};

// 开发环境下先冻结初始状态
if (process.env.NODE_ENV === 'development') {
  deepFreeze(initialState);
}

function todoReducer(state = initialState, action) {
  // 每次处理action前，冻结传入的当前状态
  if (process.env.NODE_ENV === 'development') {
    deepFreeze(state);
  }

  switch (action.type) {
    case 'ADD_TODO':
      // 正确创建新状态（不可变操作）
      const newState = {
        ...state,
        todos: [...state.todos, action.payload]
      };
      // 可选：冻结返回的新状态，确保后续不会被意外修改
      if (process.env.NODE_ENV === 'development') {
        deepFreeze(newState);
      }
      return newState;
    
    // 其他action处理逻辑...
    default:
      return state;
  }
}

export default todoReducer;

方式二：创建通用reducer包装器（推荐，避免重复代码） #

如果项目中有多个reducer，写一个通用的包装函数能减少重复代码：

import deepFreeze from 'deep-freeze';

export const freezeReducer = (reducer) => {
  return (state, action) => {
    // 冻结传入的原始状态
    if (process.env.NODE_ENV === 'development') {
      deepFreeze(state);
    }
    // 执行原reducer逻辑
    const newState = reducer(state, action);
    // 冻结返回的新状态
    if (process.env.NODE_ENV === 'development') {
      deepFreeze(newState);
    }
    return newState;
  };
};

然后在每个reducer中使用这个包装器：

import { freezeReducer } from './freezeReducer';

const initialState = { /* 你的初始状态 */ };

function todoReducer(state = initialState, action) {
  // 正常编写reducer的业务逻辑即可
}

// 导出被包装后的reducer
export default freezeReducer(todoReducer);

3. 验证效果 #

当你不小心写出直接修改状态的代码（比如state.todos.push(action.payload)而不是创建新数组），开发环境下浏览器控制台会立刻抛出类似Cannot add property 0, object is not extensible的错误，帮你快速定位问题位置。

注意事项 #

• 只在开发环境启用：生产环境要关闭这个检查，因为deep-freeze会带来额外的性能开销，且状态不可变的规范应该在开发阶段就严格遵守。
• 不要冻结非Redux状态：比如组件的local state，只针对Redux reducer的输入和输出状态即可。
• 配合Redux DevTools使用：结合DevTools的状态历史记录，能更清晰地追踪状态变化，定位突变的源头。

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