React useReducer 与 Immer 实战：5行代码简化不可变状态更新

在 React 开发中，状态管理一直是开发者需要面对的核心挑战。随着应用复杂度的提升，传统的 useState 方式可能会让代码变得冗长且难以维护。特别是当我们需要处理嵌套对象或数组的更新时，那些繁琐的 ...state 展开操作和 map / filter 调用会让代码显得臃肿不堪。

1. useReducer 的核心痛点与解决方案

useReducer 作为 React 提供的高级状态管理工具，确实能够帮助我们更好地组织复杂的状态逻辑。它将状态更新逻辑集中到一个 reducer 函数中，通过派发 action 来触发状态变更。这种模式特别适合处理包含多个子值的复杂状态，或者当下一个状态依赖于之前的状态时。

然而，传统的 reducer 编写方式存在一个显著痛点： 不可变更新带来的样板代码 。每次更新嵌套状态时，我们都需要小心翼翼地保持不可变性，这会导致代码中出现大量对象展开和数组映射操作。

function reducer(state, action) {
  switch (action.type) {
    case 'updateUser':
      return {
        ...state,
        user: {
          ...state.user,
          profile: {
            ...state.user.profile,
            address: action.payload
          }
        }
      };
    // 其他 case...
  }
}

这种"金字塔式"的展开操作不仅难以编写，更难以阅读和维护。这正是 Immer 库大显身手的地方。

2. Immer 的魔法：简化不可变更新

Immer 是一个神奇的库，它允许我们以"可变"的方式编写不可变更新。其核心原理是使用"草稿状态"(draft state)的概念：

1. Immer 接收当前状态作为输入
2. 创建一个临时的"草稿"状态（它是当前状态的代理）
3. 允许我们直接修改这个草稿状态
4. 最后，Immer 基于草稿的变化生成新的不可变状态

这种模式下，我们可以直接"修改"状态，而 Immer 会在幕后处理所有不可变更新的细节。让我们看看如何将 Immer 应用到 reducer 中：

import produce from 'immer';

function reducer(state, action) {
  return produce(state, draft => {
    switch (action.type) {
      case 'updateUser':
        draft.user.profile.address = action.payload;
        break;
      // 其他 case...
    }
  });
}

对比传统方式，这种写法更加直观和简洁。我们不再需要手动处理每一层的展开操作，而是可以直接通过属性访问路径来更新嵌套状态。

3. useImmerReducer：更优雅的集成方案

虽然我们可以手动将 Immer 的 produce 函数包裹在 reducer 中，但社区已经为我们提供了更优雅的解决方案： use-immer-reducer 。这个自定义 Hook 将 Immer 直接集成到 useReducer 的工作流中。

安装方法很简单：

npm install immer use-immer-reducer

使用示例：

import { useImmerReducer } from 'use-immer-reducer';

function App() {
  const [state, dispatch] = useImmerReducer(reducer, initialState);
  // ...
}

function reducer(draft, action) {
  switch (action.type) {
    case 'addItem':
      draft.items.push(action.item);
      break;
    case 'updateItem':
      const item = draft.items.find(i => i.id === action.id);
      if (item) Object.assign(item, action.updates);
      break;
    case 'removeItem':
      draft.items = draft.items.filter(i => i.id !== action.id);
      break;
  }
}

注意这里的 reducer 直接接收 draft 作为第一个参数，我们可以在其中使用常规的"可变"操作（如 push 、直接赋值等），而 useImmerReducer 会确保最终的状态更新是不可变的。

4. 性能考量与最佳实践

虽然 Immer 带来了极大的开发体验提升，但我们仍需关注其性能影响：

场景	传统 reducer	Immer reducer
简单更新	快	稍慢（有代理开销）
深层嵌套更新	慢（手动展开）	快（直接修改）
大型状态树	中等	可能较慢（需复制整个状态）
高频更新	优	可能成为瓶颈

最佳实践建议 ：

1. 对于简单的状态更新，传统 reducer 可能更高效
2. 对于复杂的嵌套状态，Immer 能显著提升开发效率
3. 避免在 reducer 中进行不必要的更新，即使使用 Immer
4. 对于性能敏感的场景，考虑使用 Immer 的 produceWithPatches 进行细粒度更新

一个性能优化的例子：

import { produceWithPatches, applyPatches } from 'immer';

function reducer(draft, action) {
  switch (action.type) {
    case 'optimizedUpdate':
      // 只生成变化部分，而不是整个新状态
      const [nextState, patches] = produceWithPatches(state, draft => {
        draft.deep.nested.value = action.value;
      });
      // 可以只传递 patches 给其他部分
      return nextState;
  }
}

5. 实战场景对比

让我们通过几个常见场景，对比传统 reducer 和 Immer reducer 的代码差异：

场景一：更新嵌套对象

传统方式 ：

case 'updateProfile':
  return {
    ...state,
    user: {
      ...state.user,
      profile: {
        ...state.user.profile,
        [action.field]: action.value
      }
    }
  };

Immer 方式 ：

case 'updateProfile':
  draft.user.profile[action.field] = action.value;
  break;

场景二：向数组添加元素

传统方式 ：

case 'addTodo':
  return {
    ...state,
    todos: [...state.todos, action.todo]
  };

Immer 方式 ：

case 'addTodo':
  draft.todos.push(action.todo);
  break;

场景三：条件性更新数组元素

传统方式 ：

case 'toggleTodo':
  return {
    ...state,
    todos: state.todos.map(todo => 
      todo.id === action.id 
        ? { ...todo, completed: !todo.completed }
        : todo
    )
  };

Immer 方式 ：

case 'toggleTodo':
  const todo = draft.todos.find(t => t.id === action.id);
  if (todo) todo.completed = !todo.completed;
  break;

从这些例子可以看出，Immer 显著减少了样板代码，使状态更新逻辑更加直观和易于维护。

6. 高级模式与技巧

复用 reducer 逻辑

使用 Immer 后，我们可以更容易地提取和复用 reducer 逻辑：

// 可复用的更新函数
function updateEntity(draft, id, updates) {
  const entity = draft.entities.find(e => e.id === id);
  if (entity) Object.assign(entity, updates);
}

function reducer(draft, action) {
  switch (action.type) {
    case 'updateUser':
      updateEntity(draft.users, action.id, action.updates);
      break;
    case 'updateProduct':
      updateEntity(draft.products, action.id, action.updates);
      break;
  }
}

处理异步操作

结合 Immer 处理异步操作时，需要注意不要在 reducer 中直接执行副作用。正确的做法是在组件中处理异步逻辑，然后 dispatch 同步 action：

async function fetchUser(dispatch, id) {
  dispatch({ type: 'fetchUserStart' });
  try {
    const user = await api.getUser(id);
    dispatch({ type: 'fetchUserSuccess', user });
  } catch (error) {
    dispatch({ type: 'fetchUserError', error });
  }
}

function reducer(draft, action) {
  switch (action.type) {
    case 'fetchUserStart':
      draft.loading = true;
      draft.error = null;
      break;
    case 'fetchUserSuccess':
      draft.loading = false;
      draft.user = action.user;
      break;
    case 'fetchUserError':
      draft.loading = false;
      draft.error = action.error;
      break;
  }
}

与 TypeScript 集成

使用 TypeScript 时，我们可以为 draft 状态添加类型注解，获得更好的类型安全：

interface State {
  users: User[];
  loading: boolean;
  error: string | null;
}

function reducer(draft: Draft<State>, action: Action) {
  switch (action.type) {
    case 'addUser':
      // TypeScript 知道 draft.users 是 User[]
      draft.users.push(action.user);
      break;
  }
}

7. 常见问题与解决方案

问题一：性能瓶颈

症状 ：当状态树很大或更新频率很高时，Immer 可能成为性能瓶颈。

解决方案 ：

1. 考虑将大状态拆分为多个小的 reducer
2. 使用 produceWithPatches 进行细粒度更新
3. 对于不需要不可变更新的部分，考虑使用普通对象

问题二：意外的修改

症状 ：有时会不小心在 reducer 外部修改了状态。

解决方案 ：

1. 始终通过 dispatch action 来修改状态
2. 使用 TypeScript 的 Readonly 类型标记状态
3. 在开发环境中使用 Immer 的 freeze 功能

import { produce, freeze } from 'immer';

const initialState = freeze({
  // 初始状态
});

// 在开发环境中，任何直接修改 initialState 的尝试都会抛出错误

问题三：调试困难

症状 ：由于 Immer 的代理机制，调试时查看的状态可能与实际不同。

解决方案 ：

1. 使用 Immer 的 original 和 current 函数查看原始和当前状态
2. 在 reducer 中添加调试日志
3. 使用 Redux DevTools 进行状态追踪

import { current } from 'immer';

function reducer(draft, action) {
  console.log('Current draft:', current(draft));
  // ...
}

8. 迁移策略与团队协作

对于已有项目，从传统 reducer 迁移到 Immer reducer 可以采取渐进式策略：

1. 小范围试点 ：先在一个不太复杂的 reducer 中尝试 Immer
2. 逐步替换 ：逐个 case 地替换更新逻辑
3. 团队培训 ：确保团队成员理解 Immer 的工作原理
4. 代码审查 ：特别关注可能引起性能问题的模式

团队协作时，建议制定一些规范：

• 明确哪些场景使用 Immer，哪些保持传统方式
• 统一 reducer 的函数签名风格
• 约定如何处理异步操作
• 制定性能优化策略

9. 生态系统与替代方案

除了 use-immer-reducer ，React 生态中还有其他相关工具：

1. Redux Toolkit ：内置了 Immer，简化 Redux reducer 编写
2. Zustand ：状态管理库，支持 Immer 风格的更新
3. Valtio ：基于代理的状态管理，提供类似的可变 API

选择方案时，考虑以下因素：

• 项目规模和复杂度
• 团队熟悉程度
• 性能要求
• 与其他库的集成需求

10. 未来展望与总结

React 状态管理仍在不断演进，但 useReducer 结合 Immer 的模式已经证明是一种强大而实用的组合。它既保留了函数式编程的优点，又大幅降低了开发者的认知负担。

在实际项目中，这种组合特别适合：

• 中大型应用的状态管理
• 复杂的表单状态处理
• 需要频繁更新嵌套数据的场景
• 团队协作项目，需要更可维护的状态更新逻辑

记住，技术选型最终要服务于业务需求和开发体验。当你在繁琐的不可变更新和清晰的业务逻辑之间寻找平衡点时， useReducer 与 Immer 的组合值得认真考虑。