如何像Redux DevTools一样查看React useReducer中Action的触发情况？

当然可以！其实不用额外引入复杂的库，就能让React的useReducer和Redux DevTools兼容，轻松监控action的分发情况，甚至实现Redux DevTools的核心功能。我给你两种实用方案：

方案一：对接Redux DevTools浏览器扩展（推荐） #

这是最接近Redux体验的方式，支持查看action历史、状态快照、时间旅行调试等功能。

步骤1：确保已安装Redux DevTools扩展 #

先在Chrome或Firefox应用商店安装Redux DevTools扩展，大多数前端开发者应该已经装过了。

步骤2：修改useReducer的初始化代码 #

我们可以利用useReducer的第三个参数（enhancer）来对接DevTools：

import { useReducer, useEffect } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + action.payload };
    case 'decrement':
      return { count: state.count - action.payload };
    default:
      throw new Error();
  }
}

function YourComponent() {
  // 创建DevTools增强器
  const devToolsEnhancer = window.__REDUX_DEVTOOLS_EXTENSION__?.({
    name: 'Counter Reducer', // 自定义名称，方便区分多个reducer
    trace: true, // 开启追踪，能看到触发action的具体代码位置
  });

  // 把增强器传入useReducer
  const [state, dispatch] = useReducer(
    reducer,
    { count: 0 },
    devToolsEnhancer
  );

  useEffect(() => {
    (async () => {
      const res = await fetch(some_url);
      const data = await res.json();
      dispatch({type: 'increment', payload: data});
    })();
  }, []);

  // 组件其余代码...
}

使用方式 #

打开浏览器的Redux DevTools面板，你就能看到所有分发的action（包括你关心的increment），还能查看每次action触发前后的state变化，甚至通过时间旅行回退到之前的状态。

方案二：手动包装dispatch实现基础日志 #

如果只是需要简单的控制台日志，不想依赖浏览器扩展，可以自己包装dispatch函数：

import { useReducer, useEffect, useCallback } from 'react';

function YourComponent() {
  const [state, originalDispatch] = useReducer(reducer, { count: 0 });

  // 包装dispatch，添加日志
  const dispatch = useCallback((action) => {
    console.log('📤 分发的Action:', action);
    console.log('🔄 之前的State:', state);
    originalDispatch(action);
  }, [originalDispatch, state]);

  // 监听state变化，查看更新后的状态
  useEffect(() => {
    console.log('✅ 更新后的State:', state);
  }, [state]);

  // 你的API调用代码...
}

这样每次分发action时，控制台都会打印对应的action和状态变化，一眼就能确认increment是否被触发。

这两种方案都能满足你的需求，推荐优先用Redux DevTools扩展，调试体验更完整。

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