Is there a valid config for Mobx with redux devtools?

Question

I discovered Mobx and everything is working perfect creating stores and working with this approach. However I' ve read that using redux devtools in the browser I am able to obtain visual info like if I were using Redux itself.

for instance I have:

import { observable, action } from "mobx";
import remotedev from "mobx-remotedev";

const createCounterStore = () => {
    const store = observable( {
        count: 0,
        increment: action( () => {
            store.count++;
        } ),
        reset: action( () => {
            store.count = 0;
        } ),
        decrement: action( () => {
            store.count--;
        } )
    } );

    // Connect MobX store with the Redux DevTools Extension
    remotedev( store, { name: "CounterStore" } );
};
const store = createCounterStore();
export default store;

but I 'm having those messages on the console:

# npm audit report

ws  5.0.0 - 5.2.2
Severity: moderate
ReDoS in Sec-Websocket-Protocol header - https://github.com/advisories/GHSA-6fc8-4gx4-v693
fix available via `npm audit fix`
node_modules/ws
  socketcluster-client  0.9.3 - 0.9.9 || 11.1.0 - 14.2.2
  Depends on vulnerable versions of ws
  node_modules/socketcluster-client
    remotedev  >=0.2.8
    Depends on vulnerable versions of socketcluster-client
    node_modules/remotedev

and in the browser the app is not working.

If I remove everything that has to do with remotedev te app works ok

1. Is there any way I can workaround this problem?.
2. What is the solution that skilled Mobx users do in order to use redux devtools or Mobx is not used but Mobx-State-Tree?

Answer 1

I couldn t make it work on redux devtools with this version of mobx at least:

"mobx": "6.10.2",
"mobx-react-lite": "4.0.5",

I just installed the mobx developer tools on my browser and when you click on the mobx tab and then on Record you can see how all is going. Besides, for not having the unknown action message you can place a name in the actions, like this:

import { observable, action } from "mobx";

const createCounterStore = () => {
    const store = observable( {
        count: 0,
        increment: action( 'increment', () => {
            store.count++;
        } ),
        reset: action( 'reset', () => {
            store.count = 0;
        } ),
        decrement: action( 'decrement', () => {
            store.count--;
        } )
    } );

    return store;
};
const store = createCounterStore();
export default store;

and you will be able to see this on the browser:

increment
{…}
observerCounter
observerCounter
decrement
{…}
observerCounter
observerCounter
increment
{…}
observerCounter
observerCounter
increment
{…}
observerCounter
observerCounter

Not as nice as redux devtools but if anyone knows about a better one just post it