React Native应用中Redux Toolkit配置的store无法被Redux Dev Tools识别

代码层面排查 #

• 确认store已正确通过Provider挂载到应用根节点
  入口文件（通常是index.js/main.tsx）必须用react-redux的Provider组件包裹整个应用，示例代码：

  import { Provider } from 'react-redux'
  import store from './store'
  import App from './App'
  
  ReactDOM.createRoot(document.getElementById('root')).render(
    <Provider store={store}>
      <App />
    </Provider>
  )
  

• 检查自定义enhancers/middleware是否覆盖默认配置
  如果你在configureStore中手动配置了enhancers字段，直接传入数组会覆盖默认包含的DevTools enhancer，需要改用回调形式保留默认配置：

  const store = configureStore({
    reducer: {/* 你的reducer */},
    // 错误写法：enhancers: [customEnhancer]
    // 正确写法
    enhancers: (defaultEnhancers) => [...defaultEnhancers, customEnhancer]
  })
  

• 确认运行环境为开发环境或显式开启了生产环境devTools
  Redux Toolkit默认仅在NODE_ENV === 'development'时开启DevTools，你已显式设置devTools: true可跳过本条，若未显式设置请确认本地启动的是开发服务而非生产构建预览。
• 若使用SSR框架（如Next.js、Nuxt.js），确认Provider仅在客户端侧挂载，服务端运行时无window对象无法注入DevTools。

扩展设置层面排查 #

• 确认Redux DevTools扩展为最新版本，老版本对Redux Toolkit的适配存在缺陷。
• 检查扩展站点访问权限：点击浏览器扩展栏的Redux DevTools图标，确认已开启当前站点（如localhost:xxxx）的访问权限，若使用file://协议打开本地页面，需在扩展管理页开启「允许访问文件URL」选项。
• 禁用其他可能冲突的浏览器扩展（如其他redux调试工具、广告拦截插件），部分插件会拦截DevTools的注入脚本。
• 可在浏览器控制台输入window.__REDUX_DEVTOOLS_EXTENSION__验证扩展是否注入成功：若返回undefined说明扩展未正常注入，优先排查扩展配置问题；若返回函数则说明是代码配置问题。

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