标签: redux-devtools

导入NGRX devtools使一个调试器用于铬工具结果的错误如下所示:

错误TypeError:无法读取isFiltered(:1:5016)的isFiltered(:1:5016)的未定义属性'whitelist',位于ScanSubscriber.StoreDevtools的DevtoolsExtension.notify(store-devtools.js:210)的Object.x [as send](:1:74196)位于ScanSubscriber._next(scan.js:61)的ScanSubscriber. (Subscriber.js:54)位于Notification.observe的WithLatestFromSubscriber.Subscriber.next(Subscriber.js:54)的WithLatestFromSubscriber._next(withLatestFrom.js:66)(Notification.js:15)

这是我在ngrx下面的版本:

 "@ngrx/core": "^1.2.0",
    "@ngrx/effects": "^6.1.2",
    "@ngrx/store": "^6.1.2",
    "@ngrx/store-devtools": "^6.1.2",

和我的角度和离子

 "@angular/animations": "5.2.11",
    "@angular/common": "5.2.11",
    "@angular/compiler": "5.2.11",
    "@angular/compiler-cli": "5.2.11",
    "@angular/core": "5.2.11",
    "@angular/forms": "5.2.11",
    "@angular/http": "5.2.11",
    "@angular/platform-browser": "5.2.11",
    "@angular/platform-browser-dynamic": "5.2.11",
    "@ionic-native/core": "~4.17.0",
    "@ionic-native/splash-screen": "~4.17.0",
    "@ionic-native/status-bar": "~4.17.0",

每当我尝试在app.module上导入下面的代码时,总会显示我在顶部显示的错误.

 StoreDevtoolsModule.instrument({
      maxAge: 15
    }),

顶部的错误是指第210行我控制台中的这行代码

this.extensionConnection.send(sanitizedAction, sanitizedState);

感谢有人可以提供帮助.提前致谢.

在我的应用程序状态中,有值设置为initialState.

使用React Developer Tools,可以直接修改某些状态值.

在Redux DevTools扩展中是否有类似的可能,即单击并为特定属性插入新值？

在这个 SO anwer中,它表示可以"改变你想要的任何东西",但我找不到如何.

在State - > Raw窗格中(见下图),可以覆盖值,但似乎没有应用.

我想在我们使用的react-nativereact-native 0.67.1应用程序上使用 redux devtools和hermes。

我不介意使用任何已知的工具（例如react-native-debugger或flipper），但到目前为止，我几乎所有的尝试都因各种问题而受阻。

社区目前处于一种奇怪的状态：

• react-native-debugger不适用于爱马仕
• flipper给我们带来Plugin ... is unavailable错误，感觉这些插件已经被放弃了
• redux-devtools已经移动了他们的包（@redux-devtools），但没有真正为react-native项目提供优秀的文档（它甚至可以与react-native一起使用吗？）
• remote-redux-devtools（我们过去曾取得成功）已被放弃

2022 年有没有办法将 redux devtools 与 Hermes React-Native 一起使用？

这是我们的代码：

    const enhancer = composeWithDevTools(
        applyMiddleware(createDebounce(), thunk, acuityMiddlewareCreator),
        // devTools(remoteDevToolsConfig),
    );
    const store = createStore(persistedReducer, initialState, enhancer);

我正在使用 redux-devtools-extension 开发 React Native 应用程序：

在 React Native 调试器中它可以工作，您可以看到window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__并且window.__REDUX_DEVTOOLS_EXTENSION__定义正确。

在 chrome devtools 中并非如此。

有谁知道如何在 chrome devtools 中定义这些？我在 Chrome 中安装了 redux 扩展，并尝试重新安装它。

我在 Windows 10 操作系统上使用 React Native v0.65.1 (React Native CLI) 和 Flipper 桌面应用程序 v0.114.1。在我的 React Native 应用程序中，我使用 Redux 工具包。据我所知，v0.62 以上的 RN 应该支持开箱即用的 Flipper，并且 Redux 工具包不需要为 Flipper 提供额外的中间件配置。

我尝试安装 Flipper-plugin-redux-debugger 的 npm 包，但什么也没有，Flipper 中的 Redux Debugger 仍然不可用。

我的问题出在哪里？

对于从 redux dev 工具 chrome 扩展获取最新更新后的一些未知问题，我收到以下警告消息：

Redux 和 Redux DevTools 定义的 Symbol.observable 不匹配。如果未加载 DevTools，这可能会导致您的应用程序表现不同。在导入 Redux 之前考虑对 Symbol.observable 进行polyfill，或者完全避免对 Symbol.observable 进行polyfill。

通过阅读错误消息，我了解到 redux 和 redux 开发工具应该使用相同的 Symbol.observable，但事实并非如此。这很奇怪，因为我没有更改代码中的任何内容，并且我按照文档使用代码。

我的问题是你是否知道我应该朝哪个方向走？这是一个我们只需要报告的 Chrome 扩展错误吗？

我正在使用名为Redux DevTools 的最新 chrome 扩展。我注意到，如果我卸载 chrome 开发工具扩展，则不会再出现此警告消息。

我的代码如下所示：

  // The redux-devtools-extension is renamed to this npm package
  import { composeWithDevTools } from "@redux-devtools/extension"; 

  // Some code here ...

  const composeEnhancersPersonalProject = composeWithDevTools({
    name: `My Project`,
  });

  // Some other code here ...
  
  const myStore = createStore(
    persistedReducer, …

我试图复制类似于redux docs基本示例中的TodoList 示例.第二个reducer接收一个数组 - styleItems = [{... ... }, {... ...}]然后调用第一个函数来作用于每个单独的对象.

我initialState通过以下内容向app容器提供了一个,如图所示containers/app.js.然而,传递给styleItemsreducer 的状态似乎是一个空白数组 - 每次都是如此.

但是,react会根据初始配置呈现UI,并且dev-tools会按预期显示状态结构.redux商店是否会以某种方式看到同样的反应？

集装箱/ app.js

function starterInfo(state) {
    return {

        // The ID of this particular object
        id: 12345,

        // Various keys and theri css values
        styleItems: [
            {
                pk: 31,
                order: 1,
                label: 'Caption text color',
                css_identifier: '.caption-text',
                css_attribute: 'color',
                css_value: '#FFFFFF'
            },
            {
                pk:23,
                order: 2,
                label: 'Caption link color',
                css_identifier: '.caption-link',
                css_attribute: 'color',
                css_value: '#FEFEFE' …

如何在 Chrome Inspector 窗口中配置 Redux DevTool，以便它们像红色方块中那样堆叠？目前我的视图是蓝色的，它们并排。

每当我在 Redux 存储中存储不可序列化的值时，我都会收到以下警告：

在下面的示例中，我存储了Firestore.TimestampRedux 状态。它也发生在Date物体上。

在状态中检测到不可序列化的值，路径为：blogPost.createdAt。值：t {秒：1583488258，纳秒：805000000}

看一下处理此操作类型的减速器：LOAD_BLOGPOST_SUCCESS。（参见https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serialized-items-in-my-store-state）

这就是医生的说法：

https://redux.js.org/faq/organizing-state#can-i-put-functions-promises-or-other-non-serializing-items-in-my-store-state

我可以将函数、承诺或其他不可序列化的项目放入我的存储状态中吗？

强烈建议您只将普通的可序列化对象、数组和基元放入存储中。从技术上讲，可以将不可序列化的项目插入到存储中，但这样做可能会破坏存储内容的持久性和重新水化的能力，并且会干扰时间旅行调试。

如果您对持久性和时间旅行调试等可能无法按预期工作的事情感到满意，那么完全欢迎您将不可序列化的项目放入 Redux 存储中。最终，这是您的应用程序，如何实现它取决于您。与 Redux 的许多其他事情一样，只要确保您了解其中涉及的权衡即可。

我从上面的文档摘录中不太明白。我认为这有点模糊。有人能更详细地解释一下，通过向 Redux 状态添加不可序列化的数据，我们到底可能/将会损失什么吗？

不同数据类型的结果是否不同？例如： a Promise、 afunction (ex: a React component)和 aDate会导致不同的问题吗？肯定会带来问题吗？或者它是可能发生或可能不会发生的事情吗？

保存和补充商店内容的能力意味着什么？这是否意味着它可能会破坏我的应用程序的代码，或者我们只讨论开发工具调试？

更新

刚刚从 Redux Toolkit 中找到了另一篇文档：使用不可序列化数据。

处理不可序列化的数据

Redux 的核心使用原则之一是不应将不可序列化的值放入状态或操作中。

然而，像大多数规则一样，也有例外。有时您可能必须处理需要接受不可序列化数据的操作。应该很少这样做，并且仅在必要时才这样做，并且这些不可序列化的有效负载不应该通过减速器进入您的应用程序状态。

可序列化开发检查中间件会在检测到操作或状态中的不可序列化值时自动发出警告。我们鼓励您保持此中间件处于活动状态，以帮助避免意外犯错误。但是，如果您确实需要关闭这些警告，则可以通过将其配置为忽略特定操作类型或操作和状态中的字段来自定义中间件：

看来本节教您如何忽略在操作中使用不可序列化值的警告，但它也说它不应该进入状态，对吧？

Redux 开发工具显示了时间旅行功能的一定数量的分派操作 - 有没有办法增加默认数量？