带有 redux-form 的 Redux 开发工具答案

【问题标题】：Redux dev tools with redux-form带有 redux-form 的 Redux 开发工具
【发布时间】：2016-08-21 21:02:12
【问题描述】：

我正在使用 redux 和 redux devtool 我刚刚尝试了 redux-form：干得好，用起来很有趣！但是，我猜每次我修改一个字段时，应用程序状态都会改变。 redux devtool 保存在字段中点击的每个新键。它会大大降低字段刷新速度！

这是显示应用状态更改的 redux devtool 停靠面板：

这是我将 redux-devtool 链接到我的应用商店的方法：

const createStoreWithMiddleware = (() => {

  //DEv too only available in development 
    if (__DEV__ && window && window.location) {

    return compose(
      applyMiddleware(thunk),
      devTools.instrument(),
      persistState(
        window.location.href.match(/[?&]debug_session=([^&]+)\b/)
      )
    )(createStore);
  } else {
    return compose(
      applyMiddleware(thunk)
    )(createStore);
  }
})();


function configureStore(initialState) {
  const store = createStoreWithMiddleware(rootReducer, initialState);

  if (module.hot) {
    // Enable Webpack hot module replacement for reducers
    module.hot.accept("./reducers", () => {
      const nextReducer = require("./reducers");
      store.replaceReducer(nextReducer);
    });
  }
  return store;
}

var appStore = configureStore();
export default appStore;

我想找到一种方法来避免让 redux 开发工具获取 redux-form 更改。欢迎任何更好的解决方案:)

【问题讨论】：

标签： reactjs redux redux-form redux-devtools

【解决方案1】：

我认为redux-devtools-filter-actions 是您寻求的灵丹妙药。在 this thread 抱怨 redux-form 冗长时被推荐。

【讨论】：

谢谢，我会尽快试一试，如果有效，请告诉您。非常感谢！

【解决方案2】：

您可以在浏览器中转到 redux devtools 扩展的选项，并且有一个字段，您可以在其中指定应忽略的操作。在此处输入“redux-form/CHANGE”，这应该可以工作。

【讨论】：