无需远程JS调试，如何在Expo中调试Redux/Redux-Toolkit？

一、Redux/Redux-Toolkit 调试替代方案 #

• 使用 Redux Logger 中间件
  直接在 Redux Store 中添加日志中间件，每次 Action 触发时，终端会打印 Action 类型、触发前后的 State 快照，无需依赖远程 JS 调试。
  配置示例：

  import { configureStore } from '@reduxjs/toolkit';
  import logger from 'redux-logger';
  import rootReducer from './path-to-root-reducer';
  
  export const store = configureStore({
    reducer: rootReducer,
    // 合并默认中间件与 logger
    middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(logger),
  });
  

  生产环境可通过环境变量关闭日志：

  middleware: (getDefaultMiddleware) => {
    const middlewares = getDefaultMiddleware();
    if (process.env.NODE_ENV === 'development') {
      middlewares.push(logger);
    }
    return middlewares;
  }
  

• 自定义 Redux 监听器
  利用 Redux Toolkit 的 createListenerMiddleware 监听 Action，自定义输出格式，可针对性关注特定 Action 或 State 变化：

  import { configureStore, createListenerMiddleware } from '@reduxjs/toolkit';
  import rootReducer from './path-to-root-reducer';
  
  const listenerMiddleware = createListenerMiddleware();
  
  // 监听所有 Action
  listenerMiddleware.startListening({
    predicate: () => true,
    effect: (action, listenerApi) => {
      console.log(`🔄 Action 触发: ${action.type}`);
      console.log('变更前 State:', listenerApi.getOriginalState());
      console.log('变更后 State:', listenerApi.getState());
    },
  });
  
  export const store = configureStore({
    reducer: rootReducer,
    middleware: (getDefaultMiddleware) =>
      getDefaultMiddleware().prepend(listenerMiddleware.middleware),
  });
  

• 控制台结构化输出
  在组件或 thunk 中使用 console.dir() 或 console.table() 打印 State/Action，相比普通 console.log 更易读：

  // 组件中打印当前 State
  const currentState = useSelector((state) => state);
  console.dir(currentState, { depth: null });
  
  // Thunk 中打印接口返回数据
  export const fetchData = createAsyncThunk('data/fetch', async () => {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.table(data);
    return data;
  });
  

二、Metro 日志美化方案 #

• 使用第三方美化包
  安装 metro-pretty-logger 快速实现日志高亮、结构化输出：

  1. 安装依赖：

     npm install metro-pretty-logger --save-dev
     # 或 yarn add metro-pretty-logger --dev
     

  2. 修改 metro.config.js：

     const { getDefaultConfig } = require('expo/metro-config');
     const config = getDefaultConfig(__dirname);
     
     config.reporter = require('metro-pretty-logger');
     
     module.exports = config;
     

• 自定义日志格式化
  借助 chalk 包自定义 Metro 报告器，用颜色区分不同类型日志：

  1. 安装依赖：

     npm install chalk --save-dev
     # 或 yarn add chalk --dev
     

  2. 修改 metro.config.js：

     const { getDefaultConfig } = require('expo/metro-config');
     const chalk = require('chalk');
     
     const config = getDefaultConfig(__dirname);
     
     config.reporter = {
       update: (event) => {
         switch (event.type) {
           case 'build-started':
             console.log(chalk.blue.bold('🚀 Metro 构建开始'));
             break;
           case 'build-finished':
             console.log(chalk.green.bold('✅ Metro 构建完成'));
             break;
           case 'build-error':
             console.log(chalk.red.bold('❌ 构建错误:'), chalk.red(event.error.message));
             break;
           case 'transform-error':
             console.log(chalk.yellow.bold('⚠️ 转换警告:'), chalk.yellow(event.error.message));
             break;
           default:
             console.log(event);
         }
       },
     };
     
     module.exports = config;
     

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