Redux 是一种流行的 JavaScript 应用程序状态管理库，它提供了一种可预测性的数据容器来管理前端应用程序的状态。redux-devtools-filter-actions 这个 npm 包可以帮助你在 Redux DevTools 中过滤掉某些 action，以便更容易地调试应用程序。
本文将为您介绍 redux-devtools-filter-actions 的使用方法，并提供示例代码。如果您正在学习 Redux，或者正在开发需要调试复杂 Redux 应用程序的项目，那么本文将对您有帮助。
安装
要使用 redux-devtools-filter-actions，您需要先安装它。您可以使用 npm 或 yarn 安装该包。
npm install redux-devtools-filter-actions 或者 yarn add redux-devtools-filter-actions
配置
在 Redux 应用程序中使用 redux-devtools-filter-actions 时，您需要按照以下步骤进行配置：
1. 实例化 middleware
import { applyMiddleware, compose } from 'redux';
import filterActionsMiddleware from 'redux-devtools-filter-actions';
const middlewareEnhancer = applyMiddleware(filterActionsMiddleware());2. 建立 store
import { createStore } from 'redux';
import rootReducer from './reducers/index';
const enhancers = compose(middlewareEnhancer, otherEnhancers);
const store = createStore(rootReducer, enhancers);3. 在 DevTools 中启用过滤器
- 打开浏览器的 Redux DevTools。
- 单击右上角的“筛选操作”按钮。
- 选择您要过滤的操作类型。
示例代码
以下示例代码演示如何使用 redux-devtools-filter-actions 过滤掉一个特定的 action 类型。
-- -------------------- ---- -------
-- ------ -----
----- ----------------- - --------------------
----- ----------------- - --------------------
-- ------ --------
-------- ----------- -
------ - ----- ----------------- --
-
-------- ----------- -
------ - ----- ----------------- --
-
-- --------
-------- ------------- - -- ------- -
------ ------------- -
---- ------------------
------ ----- - --
---- ------------------
------ ----- - --
--------
------ ------
-
-
-- -----
----- ------------------ - -------------------------------------------
----- --------- - ----------------------------
----- ----- - -------------------- -----------
-- - -------- ------
---------------- ----- ----------------------------- ---
----------------------------
----------------------------
----------------------------在上述示例代码中，我们使用 redux-devtools-filter-actions 来过滤掉 DECREMENT_COUNTER 类型的 actions。
总结
redux-devtools-filter-actions 是一个有用的 Redux DevTools 插件，它可以帮助您更轻松地调试前端应用程序。本文提供了有关如何安装和使用该功能的介绍，同时也提供了一个可以借鉴的示例代码。
无论您是初学 Redux 还是已经在开发复杂的 Redux 应用程序，使用 redux-devtools-filter-actions 都是一个不错的选择。它可以让您更快地找到您需要的信息，同时减少调试时间。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067008e361a36e0bce8b63