React Native 0.73（非Expo）网络与Redux状态调试方法咨询

一、Redux状态调试 #

1. Redux DevTools 正确配置 #

你之前没成功用Redux DevTools，大概率是没在Store里完成正确的连接配置：

• 安装依赖：
  npm install @redux-devtools/extension
• 在Store创建代码中集成：

  import { createStore, applyMiddleware } from 'redux';
  import { composeWithDevTools } from '@redux-devtools/extension';
  import rootReducer from './reducers';
  // 替换成你实际使用的中间件（如thunk/saga）
  import thunk from 'redux-thunk';
  
  const store = createStore(
    rootReducer,
    // 将DevTools与中间件结合
    composeWithDevTools(applyMiddleware(thunk))
  );
  
  export default store;
  

• 启动应用后，通过RN调试菜单的"Debug"唤起Chrome DevTools，就能看到Redux标签，实时查看状态变更、Action历史。

2. Flipper Redux插件（推荐新架构/Hermes） #

如果使用新架构或Hermes，Flipper是官方推荐的调试工具，Redux集成步骤：

• 安装依赖：
  npm install react-native-flipper redux-flipper
• 在Store中添加中间件：

  import { createStore, applyMiddleware } from 'redux';
  import { composeWithDevTools } from '@redux-devtools/extension';
  import rootReducer from './reducers';
  import thunk from 'redux-thunk';
  import { reduxFlipper } from 'redux-flipper';
  
  const middlewares = [thunk];
  // 仅在开发环境启用
  if (__DEV__) {
    middlewares.push(reduxFlipper());
  }
  
  const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(...middlewares))
  );
  
  export default store;
  

• 打开Flipper客户端，在Redux插件里可查看完整状态树、Action日志，还能直接Dispatch测试Action。

二、网络请求调试 #

1. Flipper Network插件（原生请求全捕获） #

Flipper的Network插件可捕获所有原生层API请求（包括fetch、axios、RN Networking模块），无需额外配置：

• 确保RN项目已集成Flipper（纯RN新项目默认已集成，旧项目可补全官方配置）；
• 打开Flipper客户端，切换到Network标签，即可查看所有请求的URL、请求头、响应体、状态码，支持筛选和搜索。

2. 临时方案：自定义网络拦截 #

如果暂时不想用Flipper，可在请求工具（如axios）中添加拦截器，将请求信息打印到控制台：

import axios from 'axios';

const api = axios.create({ baseURL: '你的API地址' });

if (__DEV__) {
  api.interceptors.request.use(config => {
    console.log('🚀 Request:', config.method?.toUpperCase(), config.url, config.data);
    return config;
  });

  api.interceptors.response.use(response => {
    console.log('✅ Response:', response.status, response.config.url, response.data);
    return response;
  }, error => {
    console.log('❌ Error:', error.response?.status, error.config.url, error.response?.data);
    return Promise.reject(error);
  });
}

export default api;

三、针对你提到的工具问题的补充说明 #

• React Native Debugger：已停止维护，不兼容Hermes和新架构，建议直接替换为Flipper；
• Ractotron：新架构下兼容性较差，Redux连接失败多因版本不匹配，不推荐继续折腾；
• react-devtools：配置Redux DevTools后，react-devtools的Profiler标签旁会出现Redux面板，可查看状态与组件的关联；
• JS Debugger（Chrome）：Hermes下Chrome的Network标签无法捕获原生请求，仅能查看JS层控制台输出，网络调试仍需依赖Flipper。

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