redux-seamless-immutable 是一个方便使用不可变数据结构的 Redux 扩展，它使用了无缝不可变，一种便于使用和编写不会突然改变数据的 JavaScript 类型。在本文中，我们将介绍如何使用它来优化您的 Redux 应用程序。
什么是突变？
在编程时，我们通常会创建可变数据结构。这些数据结构的值可以在程序执行期间任意地改变。这是一个非常方便的功能，但它也带来了一些问题。比如：
- 困难排查：当数据结构更改为意外值时，排查源头会变得更加困难。
- 增加系统复杂度：由于可变状态的存在，应用程序的状态空间往往会更加复杂，导致更多的测试和排错工作。
- 难以追踪变更：由于数据结构的突变，可能会不小心引入不必要的副作用和错误。
不可变数据结构是一种更好的选择，因为它们的状态可以得到保护，并且它们适用于处理大数据集。redux-seamless-immutable 尝试通过提供许多便利函数来缓解使用不可变数据结构的向导，并确保这些不可变的数据结构没有副作用。
安装和使用
使用 redux-seamless-immutable 就像在任何 React 或 Redux 应用程序中添加 Redux 扩展一样。您可以使用 npm 安装它：
npm install --save redux-seamless-immutable
这样，你就可以在你的代码中引入它，就像这样：
-- -------------------- ---- ------- ------ - --------------- - ---- -------- ------ --------------- ---- --------------------------- ------ --------- ---- -------------- ----- ----------- - ----------------- ---------- -------------------------- --- ------ ------- ------------展开代码
操作不可变数据
具有不可变数据的 Redux 应用程序的行为和常规应用程序的行为略有不同。简单地说，因为您不能直接突变状态，而是必须创建一个新的不可变状态树，您可能会发现您的应用程序的代码需要做一些改变。
使用不可变数据的一个示例是，在循环遍历数组时，您需要对每个项目执行某些功能，并创建承载功能结果的新数组。这可能看起来像这样：
const state = [1, 2, 3]; const newState = state.map(item => item + 1);
在不使用不可变数据时，您可以这样写：
const state = [1, 2, 3]; for (let i = 0; i < state.length; i++) { state[i]++; }
在 redux-seamless-immutable 中，我们建议使用不可变数组和其他不可变数据类型来解决这个问题。为此，你可以简单地做如下更改：
const state = immutable([1, 2, 3]); const newState = state.asMutable().map(item => item + 1);
redux-seamless-immutable 的其他特性
该 npm 包同样提供了更多的特性可以用于处理不可变数据类型，包括：
- immutifyReducer：用于创建自己的不可变学习器。
- immutable：用于将任何不可变数据类型转换为不可变数据类型。
- isImmutable：用于检查一个对象是否是不可变的。
- isInmutableCollection：用于检测是否可枚举的不可变数据类型。
总结
redux-seamless-immutable 是一个方便使用不可变数据结构的 Redux 应用程序的扩展。使用它可以更好地保护状态，降低系统复杂度。在你的代码中使用不可变数据结构时，你需要注意你的代码可能需要做一些更改。redux-seamless-immutable 可以让您更轻松地处理不可变数据，提供了许多便利函数和功能，可用于处理不可变数据类型。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedadbdb5cbfe1ea0610d04
