REDUX-DEVTOOLS TRACE TAB未显示动作callee

Question

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

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

wanted行为

我是一个完整的初学者，在遵循教程的同时，我经历了同样的问题，而我在寻找解决方案时遇到了这个问题。 我设法通过将以下行添加到

webpack.config.js块下的devServer

：

Answer 1

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

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

devtool: "source-map"

当然，当确认它正在加载您刚刚修改的配置文件之后，不要忘记停止并重新启动您的WebPack Dev服务器。
    

由于typeScript composewithdevtools不允许添加中间件和跟踪选项，因此面临问题的问题。因此，以下替换两个常数有助于解决我的问题 - 反应17.package.json

如果您使用的是Redux工具包，并且看不到代码跟踪其，因为默认情况下将其设置为10。右转，它添加

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

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

configure store。
如果您仍然看不到跟踪选项卡中的代码块将示踪剂增加到30或40

Answer 2

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

Answer 3

基于显示的堆栈跟踪，Redux Saga中间件负责派遣该动作。 鉴于该中间件的内部复杂性，我并不感到惊讶的是，您的应用程序中其他代码没有任何明显的连接。

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