0

Here is my current redux store assignment:

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, applyMiddleware } from 'redux';
import { PersistGate } from 'redux-persist/integration/react';
import reduxThunk from 'redux-thunk';

const persistedReducer = persistReducer(persistConfig, reducers);

const store = createStore(
  persistedReducer,
  composeWithDevTools(applyMiddleware(reduxThunk)),
);

I'd like to be able to stack trace within my project using Redux Devtools. The examples given don't really match my setup and was just wondering how I would go about in adding something like the trace property without totally rewriting my variable assignment to match theirs.

Carl Edwards
  • 13,826
  • 11
  • 57
  • 119
  • You followed the setup instructions [here](https://github.com/zalmoxisus/redux-devtools-extension)? Or perhaps just upgrade to [redux-toolkit](https://redux-toolkit.js.org/) which has the redux devtools configured by default. – Drew Reese Oct 25 '21 at 22:14
  • @DrewReese The former. But if you notice here: https://github.com/zalmoxisus/redux-devtools-extension#13-use-redux-devtools-extension-package-from-npm, there's no indication of where to add additional options. – Carl Edwards Oct 25 '21 at 22:51
  • Are you referring to these [configuration options](https://github.com/zalmoxisus/redux-devtools-extension/blob/master/docs/API/Arguments.md#windowdevtoolsextensionconfig)? – Drew Reese Oct 25 '21 at 23:58
  • IMO you should try adding redux-toolkit to your project and switch over to it. It's setup/configuration process is an order or two of magnitude easier to grok and use, and it's trivially simple. It took only about 20 minutes to add to a fairly mature work project and we've not looked back at "legacy" redux since. – Drew Reese Oct 26 '21 at 00:03
  • I can definitely give that a look. To answer your original question, yes. The only problem is that normally you'd pass an object of those options. With my current configuration I'm not 100% where to do this. – Carl Edwards Oct 26 '21 at 00:05
  • `const composeEnhancers = composeWithDevTools(options);` Looks like it is this `options` object. – Drew Reese Oct 26 '21 at 00:13
  • Yeah but notice that I'm inserting `applyMiddleware(reduxThunk)` as my sole argument. I'm having a hard time finding what this function returns to figure out a way to combine it's output with the `options` object shown there. – Carl Edwards Oct 26 '21 at 00:15
  • Yes, and to be quite honest, I also found this aspect of "legacy" redux very unclear. It looks as though you can pass just about anything, in any order, to `createStore` and it works. IMO, not very intuitive. – Drew Reese Oct 26 '21 at 00:20

1 Answers1

1

Have you tried setting options to composeWithDevTools and then dropping that into createStore?

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const composeEnhancers = composeWithDevTools({trace: true}); // <<< set options here

const store = createStore(
  reducer, /* preloadedState, */
  composeEnhancers( // <<< use it here
    applyMiddleware(...middleware),
  )
);
Jonathan L
  • 11
  • 1