在 React 开发中，Redux 和 Immutable.js 都是非常常见的技术。Redux 是一个状态管理库，而 Immutable.js 则是一个用于创建不可变数据结构的 JavaScript 库。它们在一起可以帮助我们更准确、更高效地管理状态数据，避免难以追踪的副作用和深层次的状态嵌套。在 Redux 应用中使用 Immutable.js 虽然不难，但有些注意事项需要特别留意。
使用 Immutable.fromJS()
在 Redux 中，通常我们会使用 Immutable.js 的 fromJS() 方法将普通对象转化为 Immutable 对象。例如：
import { fromJS } from 'immutable';
const initialState = fromJS({
users: [],
isLoading: false,
error: null
});但是需要注意的是，使用 fromJS() 时，它会将数组和对象都转化为 Immutable 对象，这可能与你的预期不一致。例如：
-- -------------------- ---- ------- ----- ---- - - ----- -------- -------- ------- ---------- -- ----- ------------- - ------------- ------------------------------------------ -- ---- - ------ --------- - ------------------------------------------- ----- -- -----
可以看到，在转化后的 Immutable 对象中，friends 属性被转化为了一个 List 对象。如果你想要使用数组而非 List，则需要在转化时指定使用 fromJS 而不是 Map/List:
const immutableUser = fromJS(user, (key, value) => {
if (Array.isArray(value)) return value;
return Immutable.Map(value);
});这里我们用一个可选的转换函数解决了问题，它会仅仅将原对象中的数组转化为数组，而对象仍然为 Map 对象。
避免使用 merge()
Immutable.js 中有一个 merge() 方法，可将两个 Map 或 Record 结构深度合并成一个新的结构：
-- -------------------- ---- ------- ----- ---- - -------- ----- -------- ---- -- --- ----- ----------- - ------------ ---- -- --- ------------------------------------- -- ------- ------------------------------------ -- --
但是在 Redux 中我们不应该使用 merge()， 因为它创建了一个新的结构，这将导致在许多情况下无法使用使用 shouldComponentUpdate() 或 PureComponent 进行性能优化。
取而代之的是，我们可以使用 set() 方法和展开运算符 ... 来实现一个简单的更新：
this.setState(
prevState => ({
user: prevState.user.set('age', 31),
})
);或使用 ES6 中的对象展开运算符：
this.setState(prevState => ({
user: { ...prevState.user, age: 31 },
}));这样，我们只是将新的属性替换了原来的属性，而非创建一个新的对象。
DeepEqual() 中的注意事项
在 Redux 中，比较两个状态是合并之前和之后的状态的一个重要功能。由于 Immutable.js 的 Map 和 List 数据结构不是 JavaScript 原生的对象，因此我们不能使用 === 运算符进行深度比较。此外，由于 Map 的属性顺序不影响其值，因此顺序也必须得到考虑。为了解决这个问题，Immutable.js 提供了 is() 和 equals() 方法，它们可以深度比较 Immutable 对象和 Immutable 集合。
当使用 connect 函数和 mapStateToProps() 时，Redux 中应该使用 is() 方法来代替 === 进行比较。例如：
-- -------------------- ---- -------
-------- ---------------------- -
------ -
------ ------------
---------- ----------------
------ -----------
--
-
-------- ---------------------- -
------ -
------ ------------
---------- ----------------
------ -----------
--
-
--------
----------------
-------------------
-----
- ------------------- ------------ -
--总结
在 Redux 应用中，我们经常使用 Immutable.js 作为状态管理的工具。在使用 Immutable.js 时，有三个主要注意事项：
- 使用
fromJS()时要注意数组的转换； - 避免使用
merge()，改为使用set()或对象展开运算符； - 在连接到 Redux 中时，使用
is()或equals()方法进行深度比较。
希望本文能够对你在 Redux 开发过程中使用 Immutable.js 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6496a7b948841e98943e0bb1