当前位置：首页 > React

react redux如何调试

2026-02-12 00:23:47React

使用 Redux DevTools 扩展

安装 Redux DevTools 浏览器扩展（Chrome/Firefox）。该工具允许实时查看状态变化、触发 action 以及时间旅行调试。在 store 配置中需添加中间件：

import { createStore, applyMiddleware } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';

const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(...middleware))
);

日志中间件集成

添加 redux-logger 中间件记录 action 和状态变化。安装后配置如下：

import { createLogger } from 'redux-logger';
const logger = createLogger({
  collapsed: true,
  diff: true
});

const store = createStore(
  reducer,
  applyMiddleware(logger, ...otherMiddleware)
);

组件级调试

在 React 组件中使用 useSelector 和 useDispatch 时，可通过 console.log 输出当前状态或 action 内容：

const data = useSelector(state => state.data);
console.log('Current state:', data);

const dispatch = useDispatch();
dispatch({ type: 'TEST_ACTION' });

单元测试验证

编写测试用例验证 reducer 和 action 的行为。使用 Jest 等工具：

test('reducer handles ACTION_TYPE correctly', () => {
  const newState = reducer(initialState, { type: 'ACTION_TYPE' });
  expect(newState).toEqual(expectedState);
});

错误边界捕获

在 React 组件树顶层添加 Error Boundary 捕获 Redux 相关的渲染错误：

class ErrorBoundary extends React.Component {
  componentDidCatch(error) {
    console.error('Redux related error:', error);
  }
  render() {
    return this.props.children;
  }
}

性能监控

使用 why-did-you-render 检测不必要的重新渲染：

react redux如何调试

import whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React, {
  trackExtraHooks: [
    ['useSelector', 'useDispatch']
  ]
});