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

Question

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

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

请帮助我如何获得工作代码。 实际行为

想要的行为

Answer 1

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

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

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

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

当然，在确认它正在加载你刚刚在package.json.

Answer 2

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

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

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

Answer 3

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

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

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

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