如何配置Redux Toolkit与Reactotron？已尝试官方步骤但未生效

1. 确认依赖安装完整 #

确保已安装所需依赖，执行以下命令（若未安装）：

npm install reactotron-react-js reactotron-redux @reduxjs/toolkit
# 或使用 yarn
yarn add reactotron-react-js reactotron-redux @reduxjs/toolkit

2. 检查 Reactotron 初始化配置 #

创建src/reactotron.js文件，确保配置仅在开发环境生效：

import Reactotron from 'reactotron-react-js'
import { reactotronRedux } from 'reactotron-redux'

if (process.env.NODE_ENV === 'development') {
  const tron = Reactotron.configure() // 默认端口9090，需修改可传参configure({host: 'xxx', port: xxx})
    .use(reactotronRedux()) // 接入Redux插件
    .connect()

  // 挂载到全局方便调试
  console.tron = tron
  // 刷新时清空历史日志
  tron.clear()
}

3. 配置 Redux Toolkit Store #

在src/store.js中，正确注入Reactotron的enhancer：

import { configureStore } from '@reduxjs/toolkit'
import yourReducer from './features/yourSlice'

const enhancers = []
if (process.env.NODE_ENV === 'development') {
  enhancers.push(console.tron.createEnhancer())
}

export const store = configureStore({
  reducer: {
    yourFeature: yourReducer
  },
  // 合并默认enhancer与自定义enhancer
  enhancers: (defaultEnhancers) => [...defaultEnhancers, ...enhancers]
})

4. 确认入口文件导入顺序 #

在项目入口文件（如src/index.js）中，必须先导入Reactotron配置，再导入store：

// 优先导入Reactotron初始化
import './reactotron'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { Provider } from 'react-redux'
import { store } from './store'
import App from './App'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)

5. 环境与工具检查 #

• 确保Reactotron桌面应用已打开，且端口与配置一致（默认9090）
• 确认当前运行环境为开发环境（NODE_ENV=development），生产环境Reactotron不会启动
• 打开浏览器控制台，排查是否有依赖缺失、语法错误等报错信息

常见问题修复 #

• 若提示console.tron is undefined：检查reactotron.js是否在入口文件最先导入，开发环境判断逻辑是否正确
• 若Reactotron无数据：确认store中已正确注入enhancer，reducer已正常挂载
• 若Redux actions不显示：检查Reactotron配置中是否已添加reactotronRedux插件

内容的提问来源于stack exchange，提问作者Rajesh N