redux-devtools 跟踪选项卡未显示操作被调用者答案

【问题标题】：redux-devtools trace tab is not showing action calleeredux-devtools 跟踪选项卡未显示操作被调用者
【发布时间】：2020-04-10 19:14:48
【问题描述】：

我正在使用 redux-devtools，我已经按照docs 中的说明配置了我的商店，但是跟踪没有显示被调用者

const composeEnhancers =
  (window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&
    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
      trace: true,
      traceLimit: 25
    })) ||
  compose;

请帮助我如何获得工作代码。 actual behavior

wanted behavior

【问题讨论】：

你解决了吗？我有完全相同的问题，调用堆栈被困在 redux-saga 中，只能跟踪通过 redux 调度从应用程序调度的调用堆栈。

标签： redux react-redux trace redux-devtools

【解决方案1】：

我是一个完整的初学者，在学习教程时遇到了同样的问题，在寻找解决方案时遇到了这个问题。

通过将以下行添加到devServer 块下的webpack.config.js，我设法使跟踪行为按预期运行：

},
devServer {
// block config
},
devtool: "source-map",
// rest of config

请注意，我只是为上下文添加了额外的行 - 我添加的唯一行是 devtool: "source-map"

当然，在确认它正在加载您刚刚在package.json 中修改的配置文件后，不要忘记停止并重新启动您的 webpack 开发服务器。

【讨论】：

【解决方案2】：

看起来设置和堆栈跟踪功能都按预期工作。

正在显示堆栈，表明 DevTools 已正确配置为捕获堆栈跟踪。

根据显示的堆栈跟踪，Redux Saga 中间件负责调度该操作。考虑到该中间件的内部复杂性，我并不感到惊讶与您应用的其余部分中的其他代码没有任何明显的联系。

能否显示原始源代码取决于是否为应用的构建过程正确定义了源映射。如果您使用的是 Create-React-App 或其他类似工具，则应该已经自动处理了。如果您以某种方式定义自己的构建配置，则应确保实际生成了源映射。

【讨论】：

谢谢您的回答，但是： 1. 在这里我使用了 create react app 并且没有添加任何额外的配置 \n 2. 具有相同代码库的同事有显示代码的痕迹从哪里开始请求。

【解决方案3】：

由于打字稿，composeWithDevTools 不允许添加中间件和跟踪选项，因此在设置时遇到了问题。因此替换下面的两个常量有助于解决我的问题 - 反应 17.

const composeEnhancers = composeWithDevTools({
    trace: true,
});

const store = createStore(pReducer, composeEnhancers(middleware));

【讨论】：

所以基本上，只使用 trace = true 设置 devtools 并将其添加到 createstore。