前言
在前端应用中，状态管理是非常重要的一环，而 Redux 作为目前比较流行的状态管理库，其强大的可预测性和可维护性受到了广泛的认可。而使用 ImmutableJS 结合 Redux 可以更好地实现不可变状态，提高性能和减少 bug，但也存在一些坑点需要注意，接下来就来具体分析。
ImmutableJS 简介
ImmutableJS（以下简称 Immutable）是一种 JavaScript 库，提供了一个不可变的数据结构，使数据的修改和传递变得更加高效和可预测。Immutable 主要提供了以下数据结构：
- List：有序的可重复的值的集合
- Map：有序的键值对的集合
- Set：无序的唯一的值的集合
- Record：Map 的特化版本，限定了可接受的键和默认值
- OrderedMap、OrderedSet、Stack 等
Immutable 数据结构是不可变的，表示一份数据的不同版本，可通过复制原始值然后修改新值的方式来创建，而原来的值不会发生变化。这种不可变性使得在实现复杂应用程序时，能够更好地保持程序的状态可维护性和可扩展性。
Redux 中使用 Immutable 的好处
在 Redux 中，state 是不可变的，每个 action 都会创建一个新的 state，而不是在原有的 state 上进行修改，这样保证了 state 记录的完整性和可追踪性。当我们使用 Immutable 来实现 state 时，可以更好地发挥这个机制，以下是一些优点：
- 保证 state 的不可变性，避免意外的修改
- 避免了 performace overhead，因为 React 可以顺利的确定哪些部分的数据发生了变化从而更新
- 操作链的优化，可以简化操作，因为 Immutable 对这种非常常见的需求提供了易于使用的 API
- 简化了 state 的深层嵌套，导致显式的转换
Redux 和 ImmutableJS 结合的问题
虽然结合使用 Redux 和 ImmutableJS 有利可图，但也存在一些需要注意的问题，主要集中在以下几点：
应用数据库查询的 API 不能直接使用
Redux 的 state 是一个 ImmutableJS 的数据结构，而 Redux 的 reducers 都是以一个普通的 JavaScript 对象作为入参。因此，在应用 Ajax 数据库API 时应该考虑如何将返回的 JSON 数据结构解压到 MongoDB 查询之前的状态中。
在 Redux 可以减少不必要的手势
ImmutableJS 在开发过程中可以很好地处理无意义的手势，比如两个类似的对象（只考虑内部数据），一个参照另一个生成。使用 ImmutableJS 可以保持代理对象的总和，而不是为两个相同的对象额外地保留另一个代理对象。
数据修改函数的返回值
使用的大部分 Redux Middleware 都是预想 action 发生状态变化时的操作，如果使用一个返回值 的函数作为数据修改函数，拦截到 action 时就不会发生任何变化。因此，返回一个自己定义的 failure action 可以更好的预处理错误。
性能问题（查看属性而不是整个结构，避免闭包）
由于 ImmutableJS 会按照不同的深度预处理不同的 key，所以在使用时建议尽可能避免查看大量的不同 key，尤其要检查是否需要查看整个 immutable 结构，或者只是其中的一些属性。避免使用不必要的闭包也是为了提高性能所必须注意的一点。
示例代码
下面是一个使用 ImmutableJS 和 Redux 的示例代码：
-- -------------------- ---- -------
------ - ---------------- ----------- - ---- --------
------ - --- - ---- ------------
----- ------------ - ----- ------ - ---
----- --------- - -- -- --
----- ------
---
----- ------------ - ------ - -- ------- -- -
------------------- -
---- ------
------ ----- - --
--------
------ ------
-
-
----- ---------- - ------------- ------ ------------ ---
----- ----------- - -----------------
------ -------------------
---
----- ----- - ------------------------ --------------
----------------------------总结
ImmutableJS 和 Redux 结合可以为我们带来不可变状态的好处，保证了程序状态的可追踪性和可维护性。但是，同时也需要注意一些陷阱，比如处理查询 API、返回值的问题、性能问题等。希望这篇文章能够帮助你更好地使用 ImmutableJS 和 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64caf4e45ad90b6d041e1022