Redux 是一个 JavaScript 状态管理库，它可以帮助我们更好地管理应用程序的状态。但在开发过程中，萌新经常会遇到各种奇怪的错误。这篇文章将为您介绍如何快速定位 Redux 中出现的错误。
错误信息
当 Redux 抛出错误时，通常会有一个明显的错误消息，其中包括具体的错误原因和出错的文件路径。
例如：
-- -------------------- ---- -------
-------- ---------- ------ ---- -------- ---------- -- ---------
-- ---- ------------------
-- ---- ------------------
-- ------------------ ------------------
-- ---------------------------------------------- ----------------
-- ------------------- --------------
-- --------------------- ----------------
-- ------------------- --------------
-- ------------
-- ------------这个错误消息非常详细，它告诉我们出错的原因是无法读取 undefined 的 getState 属性。错误发生在 redux-thunk.js 文件的第三行。从这个错误消息中，我们可以快速定位并解决问题。
DevTools 配置
在开发过程中，Redux DevTools 可以帮助我们更好地检查应用程序状态，并快速定位问题所在。您可以在浏览器的控制台中打开免费的 Redux DevTools 插件。
在应用程序的根级别中，您可以使用 Redux DevTools 的 composeWithDevTools 函数来配置 store。
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
composeWithDevTools(),
);现在您可以打开控制台并切换到 Redux DevTools 面板。您可以查看 Action、State、Diff 和其他调试信息。
Redux Logger
Redux Logger 是一个用于记录应用程序状态变化的中间件。它可以记录发生的所有 Action 和当前 State 信息。这对于调试和查找问题非常有用。
可以使用 redux-logger 库来添加 Redux Logger 到您的应用程序中。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - ------------ - ---- ---------------
------ ----------- ---- -------------
----- ---------------- - ---------------
----- ----- - ------------
------------
----------------
-----------------
--
--现在您可以打开控制台并查看日志信息了。
创建单元测试
在编写复杂的应用程序时，单元测试可以帮助您确定系统的行为是否如预期般正常工作。为 Redux 应用程序编写测试也是必要的。
主流的单元测试框架，例如 Jest 和 Mocha，都可以用于编写测试 Redux 应用程序。
下面是一个使用 Jest 的基本示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ ----------- ---- -------------
----------------------- -- -- -
------------ ------ --- ------- ------- -- -- -
----------------------------- --------------
------ ---
----------------- -----------
---
---
---
结论
Redux 为我们提供了一种强大的状态管理工具，但是在开发过程中遇到问题是不可避免的。当出现错误时，您应该查看控制台日志、使用 Redux DevTools 和 Redux Logger，以及创建单元测试。
不要害怕出现错误。利用这些开发工具和技巧，您可以更轻松地定位和解决 Redux 中的错误，使您的应用变得更加健壮。
完整代码请参见 https://github.com/reduxjs/redux/tree/master/examples/todos。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fcc211447136260172bc06