Redux 是一个 JavaScript 状态管理库，可供应用程序使用，用于管理应用程序中的所有状态。Redux 提供了一种方便的方式来管理应用程序中的状态，并帮助应用程序更轻松地跨组件传递状态。
在一个复杂的应用程序中，Redux 可以帮助我们更好地维护应用程序的状态。然而，当我们在开发过程中调试 Redux 时，很难追踪应用程序中的每个操作。这时，我们就需要使用到一个库：redux-logger。
什么是 redux-logger？
redux-logger 是一个用于记录 Redux 操作的中间件库。它帮助我们在控制台中显示 Redux 操作。这使得调试我们的应用程序变得更加容易。
redux-logger 使用简单，只需在我们的中间件链中添加一个 logger，即可开始记录 Redux 操作。这个 logger 会记录每个操作的状态，包括下面几种：
- Action 创建函数
- Action 类型
- 更新的状态
- 前一个状态
- 当前的时间戳
如何安装 redux-logger？
首先，我们需要使用 npm 安装 redux-logger：
npm install redux-logger --save-dev
接下来，我们需要在我们的 store 中引入 redux-logger：
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(logger)
);现在，我们已经成功地将 redux-logger 添加到了我们的应用程序中。我们可以开始记录我们每一个操作了。
示例代码
在下面的示例中，我们将创建一个简单的计数器应用程序，并使用 redux-logger 记录每个操作。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ------ ---- ---------------
----- ------------ - -
------ -
--
-------- ----------------- - ------------- ------- -
------ ------------- -
---- ------------
------ -
------ ----------- - -
--
---- ------------
------ -
------ ----------- - -
--
--------
------ ------
-
-
----- ----- - ------------
------------
-----------------------
--
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---在运行上面的代码后，我们将在控制台中看到以下信息：
-- -------------------- ---- ------- ---- ----- ------- -- ------ ------ ------------ ---- ----- ------- -- ------------ ---- ----- --------- ------ ------ --------------- ---- ----- ------- -- ------ ------ ------------ ---- ----- ------- --- ------ ------ ------------ ---- ----- ------- ---
这些日志记录告诉我们，在执行每个操作时，状态是如何更新的。
结论
使用 redux-logger 可以帮助我们更好地理解应用程序中每个操作如何影响状态。这是在调试 Redux 应用程序时非常有帮助的。
要开始记录您的 Redux 操作，请使用 npm 安装 redux-logger，并将其添加到您的中间件链中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674bc42ad657e1f70dbd3c06