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

Question

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

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

请帮助我，我怎样才能得到工作代码。actual behavior

wanted behavior

Answer 1

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

通过在devServer块下的webpack.config.js中添加以下代码行，我成功地让跟踪行为按预期运行：

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

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

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

Answer 2

看起来设置和堆栈跟踪功能都像预期的那样工作。

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

根据显示的堆栈跟踪，Redux Saga中间件负责分派该操作。考虑到中间件的内部复杂性，我并不奇怪在应用程序的其余部分中没有任何明显的连接到其他代码。

能够显示原始源代码依赖于为应用程序的构建过程正确定义了源地图。如果您使用的是Create-React-App或其他类似的工具，那么应该已经自动处理了。如果你正在以某种方式定义你自己的构建配置，你应该确保源地图实际上是被生成的。

Answer 3

由于typescript的原因，composeWithDevTools不允许添加中间件和跟踪选项，因此在设置时一直面临问题。因此，替换下面的两个常量有助于解决我的问题- react 17。

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

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