使用 redux devtools 是否有有效的 Mobx 配置？

Question

我发现了 Mobx，一切都在完美地创建商店并使用这种方法。不过，我读到，在浏览器中使用 redux devtools，我可以获得视觉信息，就像我使用 Redux 本身一样。

例如我有：

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;

但是我在控制台上看到了这些消息：

# 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

并且在浏览器中该应用程序无法运行。

如果我删除与 Remotedev 有关的所有内容，应用程序就可以正常工作

1. 有什么办法可以解决这个问题吗？
2. 熟练的 Mobx 用户为了使用 redux devtools 或不使用 Mobx 而使用 Mobx-State-Tree 会采取什么解决方案？

Answer 1

我刚刚在浏览器上安装了 mobx 开发人员工具，当您单击 mobx 选项卡，然后单击“记录”时，您可以看到一切进展如何。此外，为了没有未知的操作消息，您可以在操作中放置一个名称，如下所示：

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;

您将能够在浏览器上看到这一点：

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

不如 redux devtools 那么好，但如果有人知道更好的，请发布它