如何为现有Redux Devtools配置添加堆栈追踪功能？

你不需要改动现有已定义的变量，仅需要调整composeWithDevTools的传参结构即可实现堆栈追踪功能，composeWithDevTools支持第一个参数传入DevTools的配置项，trace相关属性直接写在这个配置对象里即可。

修改后的完整代码 #

import { composeWithDevTools } from 'redux-devtools-extension';
import { createStore, applyMiddleware } from 'redux';
import { PersistGate } from 'redux-persist/integration/react';
import reduxThunk from 'redux-thunk';

const persistedReducer = persistReducer(persistConfig, reducers);

const store = createStore(
  persistedReducer,
  // 仅修改此处composeWithDevTools的传参
  composeWithDevTools(
    {
      trace: true, // 开启堆栈追踪
      traceLimit: 25 // 可选配置，限制堆栈输出的最大层数，默认值为10
    },
    applyMiddleware(reduxThunk)
  ),
);

配置说明 #

• trace：属性值为布尔类型，设置为true即可开启action派发的堆栈追踪能力，开启后在Redux DevTools的action详情面板可以看到对应action的完整调用栈
• traceLimit：属性值为数字类型，属于可选配置，用来限制堆栈追踪的输出层数，避免输出过多无用信息拖慢开发环境性能，可根据实际需求调整数值
• 生产环境建议关闭堆栈追踪功能避免性能损耗，可以结合环境变量动态配置：trace: process.env.NODE_ENV !== 'production'

内容的提问来源于stack exchange，提问作者Carl Edwards