Redux devtool 扩展：如何将功能属性添加到 enable/disable 操作？

Question

我有一个 React/redux 应用程序，我正在使用 redux-devtools-extension，我希望能够像这样管理我的扩展功能：

composeWithDevTools({
  features: {
    pause: true, // start/pause recording of dispatched actions
    lock: true, // lock/unlock dispatching actions and side effects    
    persist: true, // persist states on page reloading
    export: true, // export history of actions in a file
    import: 'custom', // import history of actions from a file
    jump: true, // jump back and forth (time travelling)
    skip: true, // skip (cancel) actions
    reorder: true, // drag and drop actions in the history list 
    dispatch: true, // dispatch custom actions or action creators
    test: true // generate tests for the selected actions
  },
  // other options like actionSanitizer, stateSanitizer
});

但是在我的代码中我有：

composeWithDevTools(applyMiddleware(...middleware))

因此，当我尝试将功能添加为第二个参数时出现错误，知道如何将它添加到我的 composeWithDevTools 中吗？谢谢！

Answer 1

编辑：刚刚看到 Zachary Haber 的回答，我认为他是对的，因为你没有传递扩展选项，只是将 composedWithDevTools 与应用的中间件一起使用，我的回答更多是针对使用 RTK 并想要编辑devTools 选项，无需创建增强器。

过去几个小时我一直在研究，看看这是如何完成的，我设法让一些东西起作用。

我在这里使用 RTK，因此不需要使用 composeWithDevTools，因为 devTools 选项可以处理这个问题，但我假设如果您这样做，createStore 方式仍然需要它。

我还注意到 redux-devtools-extension 已过时，而是使用 npm install --save @redux-devtools/extension 此处指定：redux-devtools

虽然由于某些原因在他们的扩展选项上 link： redux-devtools-extension它仍然声明使用

import { composeWithDevTools } from 'redux-devtools-extension';

我认为这是错误的。

我也在代码中留下了评论，我认为 skip/jump 已损坏，但除此之外我设法禁用了一些功能，例如暂停、锁定、导出等

import { configureStore } from "@reduxjs/toolkit";
import counterReducer from "../features/counter/counterSlice";

// below is not needed if you are doing the configStore way with RTK, if you are using createStore then use composeWithDevTools
//import { composeWithDevTools } from "@redux-devtools/extension";

const composeEnhancers = {
  features: {
    pause: true, // start/pause recording of dispatched actions
    lock: true, // lock/unlock dispatching actions and side effects
    persist: false, // persist states on page reloading
    export: false, // export history of actions in a file
    import: "custom", // import history of actions from a file

    // fairly certrain jump and skip is broken, if I set both to false then neither show on hover, if I set Jump to true, it still doesnt show either them,
    // if I set skip to true and jump to false, it shows both of them on hover

    jump: false, // jump back and forth (time travelling)
    skip: false, // skip (cancel) actions

    reorder: true, // drag and drop actions in the history list
    dispatch: true, // dispatch custom actions or action creators
    test: false, // generate tests for the selected actions
  },
};

// const customizeDevTools =
//   window.__REDUX_DEVTOOLS_EXTENSION__ &&
//   window.__REDUX_DEVTOOLS_EXTENSION__({
//     features: {
//       pause: false, // start/pause recording of dispatched actions
//       lock: false, // lock/unlock dispatching actions and side effects
//       persist: false, // persist states on page reloading
//       export: false, // export history of actions in a file
//       import: "custom", // import history of actions from a file
//       jump: false, // jump back and forth (time travelling)
//       skip: false, // skip (cancel) actions
//       reorder: true, // drag and drop actions in the history list
//       dispatch: true, // dispatch custom actions or action creators
//       test: true, // generate tests for the selected actions
//     },
//   });

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },

  // enhancers: [customizeDevTools],
  // below must be set false if you are looking to do it with the enhance method

  devTools: composeEnhancers,
});

Answer 2

根据 redux-devtools 的 documentation，您必须先运行 composeWithDevTools 与选项，然后运行针对您的中间件的新功能。

const composeEnhancers = composeWithDevTools(options);

composeEnhancers(applyMiddleware(...middleware))

Redux devtool 扩展：如何将功能属性添加到 enable/disable 操作？

Redux devtool extenstion : How to Add Features property to enable/disable actions?

reactjs

redux

redux-devtools

redux-devtools-extension

Redux devtool 扩展：如何将功能 属性 添加到 enable/disable 操作？

Redux devtool extenstion : How to Add Features property to enable/disable actions?

reactjs

redux

redux-devtools

redux-devtools-extension

Redux devtool 扩展：如何将功能属性添加到 enable/disable 操作？