带有 redux-form 的 Redux 开发工具

Posted 2023-02-19

【中文标题】带有 redux-form 的 Redux 开发工具

【英文标题】：Redux dev tools with redux-form

【发布时间】：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 更改。欢迎任何更好的解决方案:)

【参考方案1】：

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

【讨论】：

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

【参考方案2】：

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