Redux 中使用 ImmutableJS 时的坑

前言

在前端应用中，状态管理是非常重要的一环，而 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 时，可以更好地发挥这个机制，以下是一些优点：

  1. 保证 state 的不可变性，避免意外的修改
  2. 避免了 performace overhead，因为 React 可以顺利的确定哪些部分的数据发生了变化从而更新
  3. 操作链的优化，可以简化操作，因为 Immutable 对这种非常常见的需求提供了易于使用的 API
  4. 简化了 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

阅读全文

猜你喜欢

  • ES6 到 ES5 一键转换，Webpack 与 Babel 转角

    JavaScript 是现代网页开发中的必备语言。而 ES6 已经成为 JavaScript 的一个重要版本，引入了许多新特性。但是，许多浏览器还不支持 ES6，这使得开发者必须使用 ES5 进行开发...

    1 年前
  • React Native Android 打包生成 APK 包全流程及陷阱

    React Native 是一种流行的跨平台移动应用开发框架，可以通过 javascript 编写一次代码，并在 iOS 和 Android 平台上运行。在开发过程中，我们需要将应用打包成 APK 包...

    1 年前
  • 解决 Hapi 框架中的跨域资源共享问题

    背景 在开发前端应用时，常常需要从不同的域获取数据或资源。然而，由于浏览器的安全性限制，我们不能直接访问其他域的数据或资源，这就是跨域问题。 为了解决跨域问题，我们可以使用跨域资源共享（CORS）机制...

    1 年前
  • ESLint 在 Node.js 项目中的使用及配置

    简介 ESLint 是一款静态代码分析工具，能够帮助开发者在编写代码时发现潜在的问题，从而提高代码质量和开发效率。本文将介绍如何在 Node.js 项目中使用 ESLint，并给出详细的配置说明。

    1 年前
  • Cannot find module 'webpack' 的解决方法

    在使用 webpack 进行前端开发时，你可能会遇到 “Cannot find module 'webpack'” 的错误。这个错误通常在安装 webpack 命令行工具时出现，会导致 webpack...

    1 年前
  • 使用 TypeScript 实现数据分页功能的最佳实践

    在前端开发中，数据分页是一项常见的需求，尤其在处理大量数据时更为常见。常规的实现方法为前端发送请求获取后端的数据、进行数据处理、渲染到页面上，但这种方式存在性能瓶颈，例如：数据多时，渲染很缓慢，可能会...

    1 年前
  • RxJS 中 retry 的使用场景及应用案例分享

    RxJS 中 retry 的使用场景及应用案例分享 RxJS 是一款针对 JavaScript 的响应式编程库，它提供了一系列强大的操作符，用于处理异步数据流。其中，retry 操作符就是一个非常实用...

    1 年前
  • 使用 Custom Elements API 为 Web 开发增加灵活性

    Custom Elements API 是 Web Components 核心规范之一，旨在让开发者可以更方便地创建自定义的 HTML 元素。使用 Custom Elements API 可以将重复的...

    1 年前
  • ES10 中的 BigInt 的运算优先级详解

    在 JavaScript 中，数字有一个最大值，即 Number.MAX_SAFE_INTEGER，约等于 2^53 - 1，当数字超过这个值时，会出现精度丢失的问题。

    1 年前
  • Promise 在 Node.js 中的应用实例讲解

    前言 Promise 是 JavaScript 的内置 API，可以让我们更优雅的处理异步回调，它主要是用于简化 JavaScript 异步编程的一种手段。Node.js 是一个基于 Chrome V...

    1 年前
  • ES12 中的新特性：增加了 DOM addEventListener 的捕获默认模式

    在前端开发中，DOM addEventListener 是一个非常常用的方法，它可以用来监听一个元素上的事件并执行对应的处理函数。在事件流中，事件的传递顺序分为冒泡和捕获两种模式。

    1 年前
  • 使用 Mongoose 优化 Express 应用中的数据库操作

    在开发 Express 应用的过程中，我们通常需要和数据库打交道。而在数据库操作中，使用 Mongoose 可以使得操作更加便捷和高效。 Mongoose 简介 Mongoose 是基于 MongoD...

    1 年前
  • Mysql 容器环境变量设置及 mysql 初始化

    MySQL 是一种关系型数据库，广泛用于 Web 应用程序的数据存储和管理。在开发和部署 Web 应用程序时，经常会使用容器化技术，如 Docker，来创建和管理 MySQL 实例。

    1 年前
  • Kubernetes 存储卷及 volume mode 详解

    前言 Kubernetes 是一个开放源码的容器编排系统，它可以自动管理容器化应用程序的部署、升级、伸缩和故障排查等任务。Kubernetes 提供了强大的存储卷（Volume）概念，使得容器能够更加...

    1 年前
  • Express.js 中的异常处理

    异常处理是 Web 应用开发中非常重要的一环。在 Express.js 中，处理异常可以有效地提升应用的稳定性和可靠性。本文将介绍在 Express.js 中如何使用 Express-async-er...

    1 年前
  • 闪亮的 ECMAScript 2018 (ES9) 新特性

    JavaScript 的标准制定组织 ECMAScript 在 2017 年底发布了 ECMAScript 2018（简称 ES9）的最终版本，在新的版本中引入了一些非常有趣且实用的新特性。

    1 年前
  • 解决 LESS 中背景图片无法显示的问题

    LESS 是一种基于 CSS 的预处理器，它提供了诸如变量、嵌套、Mixin 等功能，让我们能够更方便灵活地编写样式代码。然而，有时候我们使用 LESS 写的样式中，包含的背景图片却无法正确显示，这是...

    1 年前
  • 如何解决 Jest 测试报告中的 “Test exit with non-zero code: 1” 错误？

    Jest 是前端开发中常用的一款测试框架，它可以帮助我们快速写出高效、稳定的测试用例。但是在使用 Jest 进行测试时，有时会出现 “Test exit with non-zero code: 1” ...

    1 年前
  • Deno 中遇到 Module not found 错误该如何解决？

    什么是 Deno？ Deno 是一个用于开发 Web 应用、服务端应用、脚本和工具的 JavaScript 和 TypeScript 运行时环境，它由 Node.js 的创建者 Ryan Dahl 开...

    1 年前
  • 怎么解决 Node.js 进程崩溃的问题

    Node.js 是一种非常流行的服务端开发语言，但是在开发中，我们时常会遇到进程意外崩溃的情况。如果不及时处理这些问题，就会导致严重的线上事故。那么，怎么有效的解决 Node.js 进程崩溃问题呢？ ...

    1 年前

相关推荐

    暂无文章