React Native复用Web端Redux代码创建Store后应用启动报错排查

• 核心触发源是Store配置代码中直接引用Web端专属的window全局对象。React Native运行的Hermes/JSC引擎环境不存在浏览器才有的window全局变量，代码执行到读取window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__的行时，直接抛出TypeError: undefined is not a function的早期初始化错误。
• 连锁出现的AppRegistry未注册、runApplication调用报错，都属于JS加载阶段早期崩溃引发的次生问题，并非入口路径错误、JS Bundle损坏导致，因为整个JS上下文还没完成初始化流程，就被运行时错误中断了。
• 注释掉Store初始化逻辑后应用能正常运行，本质是跳过了那段触发早期崩溃的代码，和Store结构、Redux版本没有关系。之前反复调整Store配置没解决，是因为没有定位到跨端复用Web代码时遗留的环境兼容问题。

修正Store配置的环境兼容判断逻辑，避免在RN环境下直接访问不存在的window全局对象，修正后的核心代码如下：

import {createStore, applyMiddleware, compose} from 'redux';
import {thunk} from 'redux-thunk';
import rootReducer from './src/reducers';

const initialState = {};
const middleware = [thunk];

// 跨端兼容判断，只有存在window对象的环境才读取DevTools扩展配置
const composeEnhancers = (
  typeof window !== 'undefined' &&
  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
) || compose;

const store = createStore(
  rootReducer,
  initialState,
  composeEnhancers(applyMiddleware(...middleware)),
);

export default store;

补充注意事项：

• 上述判断逻辑会在Web环境下正常加载浏览器的Redux DevTools扩展，在RN环境下自动走默认的compose逻辑，不会触发未定义访问的报错。
• RN端接入Redux DevTools不需要手动写入window相关的判断代码，只要在RNDebugger运行状态下，DevTools会自动注入连接接口，无需额外配置。
• 检查入口代码中./src/routes/DreawerNavigator的路径拼写错误，修正为正确的DrawerNavigator路径，避免后续导航模块加载失败。

• 首先要完成上述的Store代码修复，确保应用启动阶段不会触发早期崩溃，这是能正常建立调试连接的前提。之前调试连接失败的根本原因是应用还没跑到建立调试连接的代码段就直接崩溃了。
• 连接流程：先启动RNDebugger桌面端，重启应用后摇一摇调出开发者菜单，选择"Debug JS Remotely"选项，应用会自动将JS执行上下文连接到本地运行的RNDebugger实例。
• 连接异常排查：
  • 确认RNDebugger版本支持当前应用使用的Hermes引擎调试协议，避免因版本过旧不兼容导致连接失败。
  • 清空Metro缓存重启服务，执行npx react-native start --reset-cache，避免旧的缓存JS代码引发的运行时错误。
  • 检查本地8081端口是否被其他进程占用，释放端口后重试连接。

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