Immer 实战手册
date
Nov 7, 2025
slug
immer.js-guide
status
Published
tags
Immer
summary
让数据修改像玩橡皮泥一样简单
type
Post
哈喽，我的代码追随者们！👋
今天咱们来深入了解 Immer 的核心功能 ——
produce 函数。看完这篇，你会发现修改数据原来可以这么爽！🎯 第一章：认识主角 produce
produce 函数：魔法棒的使用说明书
这就像是哈利波特的魔法棒：
- 📚
baseState：你的原始数据，像霍格沃茨的古老藏书
- 🪄
recipe：你的咒语，告诉魔法棒该怎么变
- 📝
draftState：一个可以随便涂改的草稿本
- ✨
nextState：施法后得到的全新结果
最神奇的是：原始的
baseState 永远不会被改变，但 nextState 会包含你对 draftState 做的所有修改！🎪 实战演示：让数据起舞
🔬 验证魔法效果
🎨 在 recipe 里，你就是上帝
在 recipe 函数里，你可以使用所有 JavaScript 的骚操作：
这感觉就像在自己的沙盒里堆城堡，怎么玩都不会弄脏别人的地盘！😄
📚 术语小词典（面试装X必备）
baseState（基态）：你的原始数据，供在博物馆里的原件
recipe（配方）：告诉 Immer 怎么"烹饪"数据的函数
draft（草稿）：可以随便糟蹋的复制品
producer（生产者）：使用 produce 的函数，像个数据加工厂
💡 小贴士：虽然 draft 只是个参数名，你也可以叫它 data 或 小可爱，但用 draft 能让别人一眼看出"哦，这里可以随便改！"
🚀 第二章：React + Immer = 完美搭档
useState + Immer：让深层更新变简单
还记得以前更新嵌套状态时的痛苦吗？
🎁 useImmer：更爽的语法糖
觉得每次都写
produce 很烦？试试 use-immer 包！就像从手动挡换成自动挡，你只管踩油门，换挡的事交给它！
🎮 useReducer + Immer：复杂状态管理神器
当状态逻辑复杂时，
useReducer + Immer 简直是降维打击！🎯 useImmerReducer：终极简化版
🐻 第三章：Zustand + Immer = 轻量级最强组合
忘掉笨重的 Redux 吧！现在流行的是 Zustand + Immer 组合，轻量又强大！
基础用法：让 Zustand 状态不可变
🎁 使用 Immer 中间件：更优雅的写法
Zustand 提供了官方的 Immer 中间件，让代码更简洁！
🚀 在组件中使用
💎 Zustand + Immer 的优势
相比 Redux + Immer：
- 更少的样板代码：不需要 actions、reducers、types 分离
- 更小的包体积：Zustand 只有 8KB，加上 Immer 也就 20KB
- 更简单的心智模型：就是一个 store，没有那么多概念
- TypeScript 友好：类型推导自动完成
🎬 总结：选择你的武器
- 简单项目：
useState+produce
- 中等复杂度：
useImmer或useImmerReducer
- 需要全局状态：
Zustand+immer中间件
- 大型企业项目：
Redux Toolkit（内置 Immer）
记住我的编程哲学："不要为了用工具而用工具，要为了解决问题而选择合适的工具。"
现在，去把你项目里那些丑陋的状态更新都换成优雅的 Immer 吧！相信我，你的同事会感谢你的！
P.S. 如果你还在纠结用 Redux 还是 Zustand，我的建议是：除非你的老板坚持要用 Redux，否则试试 Zustand 吧！它会让你的生活更美好。😊
P.P.S. 下期预告：《Immer 高级技巧：Patches 和时间旅行》，让我们一起探索 Immer 的黑科技！🚀