reactjsreduxredux-devtoolsredux-devtools-extension

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

I have a React/redux application and I'm using redux-devtools-extension, I want to be able to manage features of my extenstion like this :

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
});

But in my code I have :

composeWithDevTools(applyMiddleware(...middleware))

So when I try to add Features as a second parameters I get an error, any idea how to add it in my composeWithDevTools ? thank you!

Solution

  • Edit: just saw Zachary Haber's answer and I think he's right cause you aint passing in the extension options, just using composedWithDevTools on its own with the applied middleware, my answer is more for people using RTK and want to edit the devTools option without having to create an enhancer.

    I've been looking into this past few hours as well seeing how this is done and I managed to get something working.

    I'm using RTK here so the use of composeWithDevTools is not needed as devTools option handles that, but I'm assuming if you doing it the createStore way still need it.

    I also noticed that redux-devtools-extension is outdated and instead using npm install --save @redux-devtools/extension as specified here: redux-devtools

    although for some reason on their extension options link: redux-devtools-extension it still states to use

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

    Which I think is wrong.

    I've left comments in the code as well, I think skip/jump is broken, but other than that I've managed to disable some things like Pause, lock, export etc

    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,
});