如何在React Native Redux Toolkit项目中集成Redux DevTools调试工具

你当前的基础配置已经开启了Redux Toolkit默认的DevTools开关，但React Native是移动端运行环境，无法直接复用Web端浏览器DevTools，需要额外调整配置并配合专用调试客户端，具体操作如下：

1. 准备调试客户端 #

优先使用React Native Debugger，该客户端内置Redux DevTools支持，无需额外安装插件，直接搜索官方客户端下载安装到本地电脑即可。
如果是Expo项目，也可以直接使用Expo配套的调试工具链。

2. 调整store配置 #

将原本devTools字段的布尔值配置改为对象形式，开启远程调试适配移动端，修改后的完整store代码如下：

import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
import reducers from './reducers';
import createSagaMiddleware from 'redux-saga';
import saga from './saga';

const sagaMiddleware = createSagaMiddleware();

const store = configureStore({
  reducer: reducers,
  // 仅开发环境开启DevTools，生产环境自动关闭
  devTools: process.env.NODE_ENV !== 'production' ? {
    remote: true, // 开启远程调试模式，适配移动端环境
    hostname: '192.168.xxx.xxx', // 替换为你电脑的局域网IP，不要填localhost/127.0.0.1
    port: 19000, // 对应调试客户端端口，Expo项目默认19000，原生RN项目默认8098
    name: 'RN项目Redux调试'
  } : false,
  middleware: getDefaultMiddleware => getDefaultMiddleware({ thunk: false }).concat(sagaMiddleware)
});
sagaMiddleware.run(saga);

export default store;

注意：你原有代码里引入的compose在Redux Toolkit的configureStore中不需要使用，可直接删除该引入。

3. 启动调试流程 #

• 先打开React Native Debugger，确认端口和你配置的port字段一致
• 启动RN项目，打开开发者菜单：模拟器按Cmd+D(Mac)/Ctrl+M(Windows)，真机摇晃设备唤起
• 选择「Debug JS Remotely」选项，Expo项目选择「Debug remote JS」
• 回到React Native Debugger，即可在Redux DevTools面板查看action触发记录、状态快照，使用时间旅行等调试能力。

常见连接问题排查 #

• 确保手机/模拟器和你的电脑处于同一个局域网
• 确认hostname字段填写的是电脑的真实局域网IP，而非回环地址
• 关闭电脑防火墙，或给配置的端口开放白名单

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