过滤掉 redux devtool 扩展中的操作答案

【问题标题】：Filter out actions in redux devtool extension过滤掉 redux devtool 扩展中的操作
【发布时间】：2019-06-03 14:35:36
【问题描述】：

我有一个动作，每秒钟调度一次。它从每秒接收数据的网络套接字连接调度。

这会导致我的 devtool 充满了很多此类操作，因此难以调试其他操作和内容。

有没有办法从记录器中过滤掉所有这些“噪音”

我尝试了以下操作：

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    actionsBlacklist: 'METER_DATA_RECEIVE'
  }) || compose;

但这不仅会过滤掉记录器中的动作，还会过滤掉应用程序中的动作。也就是说，它没有被调度，所以它就像不调用我不想要的动作一样好。

换句话说，我希望动作被调度但没有登录到 redux 开发工具

【问题讨论】：

标签： redux redux-devtools-extension

【解决方案1】：

您可以在浏览器中进行配置。

在Redux DevTools Extension 设置中有一个选项Filter actions in DevTools。只需在此处输入“METER_DATA_RECEIVE”即可。

要修改扩展设置，请单击 Redux 选项卡右下角的齿轮图标，或在 Chrome 扩展详细信息屏幕中选择 Extension Options。

【讨论】：

不起作用。它会导致 redux 也忽略那些导致 store 根本不更新的操作。
应用程序仍会收到这些消息及其存储更新。但是你是对的，因为 Redux 扩展没有显示这个动作，你也看不到那里的新状态。但是，Redux 扩展中的任何新的（和显示的）操作都会为您提供存储的当前状态（包括过滤操作的更改）。

【解决方案2】：

我正在使用这种方法过滤掉我的代码中的动作，它工作得很好——动作被过滤掉了，但仍然被分派了。

如果您正在使用其他中间件，也许这会弄乱它。

middlewares.push(ReduxPromise, reduxThunk);
let composeEnhancers = compose;

const composeEnhancers =
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
    actionsBlacklist: [
         'METER_DATA_RECEIVE',
         'METER_UPLOAD_PARTS',
    ]
  }) || compose;

const store = createStore(reducers, composeEnhancers(applyMiddleware(...middlewares)));

【讨论】：

【解决方案3】：

你试过这个插件吗...

https://github.com/bvaughn/redux-devtools-filterable-log-monitor

【讨论】：