在处理大规模数据状态时，Redux 已经成为了前端开发者的标配。Redux 通过单向数据流、纯函数等思想，让应用状态更加可预测，从而更易于维护。然而，在开发过程中，我们仍然有可能遇到一些问题，如：
- 在复杂业务场景中，数据状态不可解释或难以通过 LOG 进行调试
- 调试时需要反复重现和操作场景，不仅效率低下，还容易损失准确性
Redux 的时间旅行（Time Travel）功能，不仅能解决上述问题，还能够极大地提高开发效率。本文将讨论 Redux 时间旅行的实现、原理、使用以及一些使用技巧。
Redux 时间旅行的实现
Redux 时间旅行通过控制“时光机”来实现，时光机指的是将应用程序的状态树保存在某个时间点的数据结构。Redux 库内置了 time-travel 调试器，可以为我们提供可视化的时光旅行。
为了实现 Redux 时间旅行的功能，需要进行以下几个步骤：
安装 Redux 拓展-logger
npm install --save redux-logger
Redux 拓展 logger 可以将应用程序中正在进行的各种信息输出到控制台中。
在 Redux 中，更新状态的操作被封装为 action。logger 可以在动作被发起和完成时记录当前状态和信息，帮助我们了解每个动作对状态的影响。logger 中间件可以通过以下方式在应用程序中进行配置：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ ------ ---- --------------- ------ ----------- ---- ------------- -- --- ------- -- -- ----- ----- ----- - ------------ ------------ ----------------------- -- ----- --
安装 Redux 拓展-devtools-extension
npm install --save redux-devtools-extension
Redux DevTools 是一组开发人员工具，可以帮助你方便地调试 Redux 应用程序。
在 Redux 开发过程中，开发者会使用 Redux DevTools 来跟踪状态变化、查找错误等。Redux DevTools 可以在浏览器的 developer console 中进行配置，如下所示：
-- -------------------- ---- ------- ------ - ------------ ---------------- ------- - ---- -------- ------ ------ ---- --------------- ------ ----------- ---- ------------- -- --- ------- -- ----- -------- -- ----- ---------------- - ------------------------------------------- -- -------- -- -- ----- ----- ----- - ------------ ------------ ----------------------------------------- --
配置开发环境
在开发环境中启动时，需要将 store 放入 window 对象中，以便 Redux DevTools 与应用程序进行通信。
if (process.env.NODE_ENV === 'development') {
window.store = store; // 以便 Redux DevTools 使用
}这样，在 Redux 开发过程中，我们就能够看到时光旅行的功能了。
Redux 时间旅行的原理
在将应用程序的状态保存在时光机中后，Redux 库会跟踪每个 action 对应的状态快照，并将这些快照保存在一个数组中。当我们想要进行时光旅行时，只需按照时间线逐个加载状态快照即可。
时光旅行的过程，实际上就是将保存在时光机中的状态树，以及与之对应的 action 操作，回放到指定的时间点。可以按照如下方式实现：
-- -------------------- ---- -------
------ - ----------- - ---- --------
-- -------
-------- ------------- - --- ------- -
------ ------------- -
---- ------
------ -
---------
------ ----------- - -
--
---- ------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
-
-- -- -----
----- ----- - ---------------------
-- ---- -
---------------- ----- ----- ---
---------------- ----- ----- ---
-- ---- -
---------------- ----- ----- ---
-- -- -----------
------------------ -- -
------------------------------ -- -----
---在上面的代码中，我们通过 dispatch 方法模拟了两次 save 状态快照，然后通过 subscribe 方法实时订阅了 store 状态的更新。当 state 变化时，我们就能够在 console 中看到 store 的记录变化了。
Redux 时间旅行的使用
在 Redux 应用程序中，时光旅行是一个很强大的调试工具，可以帮助开发者快速定位错误。在使用时，需要注意以下几点：
- 对于开发者而言， Redux 时间旅行需要在 Chrome 浏览器中使用 Redux DevTools 进行配置。在进行时光旅行时，需要点击 DevTools 中的“time-travel”按钮。
- 当我们需要执行某个 action 时，按下“Jump”按钮，就可以跳转到某个时间点。
- 对于一个高频的 action，最好只保留最后一个快照，以便节省内存开销。
- Redux 时间旅行的功能只在开发环境有效。因此，在生产环境中，不需要启用此功能。为了避免出现错误，我们可以将时光旅行模块直接删除。在生产环境中，只启用 logger 中间件即可。
下面是一个简单的示例代码，演示了如何使用 Redux 时间旅行来调试应用程序中的错误：
-- -------------------- ---- -------
------ - ------------ ---------------- ------- - ---- --------
------ ------ ---- ---------------
------ ----------- ---- -------------
-- ----------
----- ---------- - ---------
-- -- -----
----- ----- - ------------
------------
---
--------
-------------------------------
----------------------------------- -- ------------------------------------- -- -- ----- --------
-
--
-- -------
----- ------- - -----------------
-- -------- -------
---------------- ----- ------ -------- - ---
---------------- ----- ------ -------- - ---
---------------- ----- ------ -------- - ---
---------------- ----- ------ -------- - ---
------------------------------ -- ------
-- --------
---------------- ----- ------- -------- ------- ---
------------------------------ -- -------上述代码中，我们定义了 logger 中间件和 rootReduer，用于输出日志和更新状态。当我们进行调试时，可以通过 Redux DevTools 的 time-travel 功能，逐个回放时光机中保存的状态快照。每个状态快照都与一个特定的 action 相关联，帮助我们快速定位错误。
总结
通过 Redux 的时间旅行功能，我们能够轻松地跟踪应用程序的状态变化，回放历史状态，快速定位错误。为了使用 Redux 时间旅行，我们需要安装 logger 和 devtools-extension 扩展，并将它们配置到应用程序中。此外，在开发过程中，我们还需要注意高频 action、生产环境等情况，以便避免影响应用程序的性能。掌握 Redux 时间旅行的技巧，将大大提高我们的代码编写和调试效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a8760548841e98944f50ec