在前端开发中，我们经常需要调试我们的代码以排除错误并优化性能。Redux-logger 是一个非常有用的工具，它可以帮助我们在 Redux 应用中记录每个 action 和 state 的变化，以便更轻松地调试我们的应用程序。
Redux-logger 的基本用法
Redux-logger 是一个 Redux 中间件，它可以通过 npm 安装：
npm install redux-logger --save-dev
安装后，我们需要将它添加到 Redux 的 middleware 中：
import { createStore, applyMiddleware } from 'redux';
import logger from 'redux-logger';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
applyMiddleware(logger)
);现在，每当我们分发一个 action 时，Redux-logger 将记录该 action 和当前的 state。我们可以在浏览器的控制台中查看这些记录：
如上图所示，我们可以看到每个 action 的类型、payload 和当前的状态。这些信息可以帮助我们更好地理解我们的应用程序的行为。
Redux-logger 的高级用法
除了基本用法外，Redux-logger 还提供了许多高级功能，以帮助我们更好地调试我们的应用程序。
过滤 action
有时我们只关心特定类型的 action，而不是所有 action。我们可以使用 Redux-logger 的 predicate 选项来过滤要记录的 action：
const store = createStore(
rootReducer,
applyMiddleware(
logger({
predicate: (getState, action) => action.type !== 'LOADING'
})
)
);在上面的示例中，我们将只记录不是 LOADING 类型的 action。
自定义输出格式
默认情况下，Redux-logger 输出的格式可能不是我们想要的。我们可以使用 formatter 选项来自定义输出格式：
-- -------------------- ---- -------
----- ----- - ------------
------------
----------------
--------
---------- ------- ------- -- -
----- - ----- ------- - - -------
------ ------- ------- ---- ------- ----------------------------
-
--
-
--在上面的示例中，我们将自定义输出格式为 Action {type} with payload {payload}。
自定义输出方法
除了自定义输出格式外，我们还可以自定义输出方法。例如，我们可以将日志输出到服务器而不是控制台：
-- -------------------- ---- -------
----- ----- - ------------
------------
----------------
--------
------- ------- ------- -- -
----- - ----- ------- - - -------
----------------- -
------- -------
----- ---------------- ----- ------- --
---
-
--
-
--在上面的示例中，我们将日志输出到 /api/log 路径。
结论
Redux-logger 是一个非常有用的工具，它可以帮助我们更轻松地调试 Redux 应用程序。在本文中，我们介绍了 Redux-logger 的基本用法和高级用法，并提供了示例代码。希望本文能够帮助您更好地使用 Redux-logger 进行调试。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675a4e85eea933d9cc2fba9b