react redux如何调试
使用 Redux DevTools 扩展
Redux DevTools 是浏览器扩展工具，支持 Chrome、Firefox 和 Edge。安装后可直接在开发者工具中查看 Redux 状态树、派发的 action 以及状态变化历史。支持时间旅行调试，可回退到任意历史状态。
添加日志中间件
在 Redux store 中引入 redux-logger 中间件，每次 action 派发时会自动打印前后状态对比。配置示例如下：
import { createLogger } from 'redux-logger';
const logger = createLogger({
collapsed: true,
diff: true
});
const store = createStore(reducer, applyMiddleware(logger));单元测试工具
使用 Jest 配合 @testing-library/react 测试 Redux 相关逻辑。对 action creators、reducers 和选择器函数编写独立测试用例。示例测试 reducer：
test('should handle ADD_TODO', () => {
const initialState = [];
const action = { type: 'ADD_TODO', text: 'Test' };
expect(todosReducer(initialState, action)).toEqual([{ text: 'Test' }]);
});错误追踪集成
在 Redux 中间件中捕获异常并发送到错误监控服务（如 Sentry）。示例错误追踪中间件：
const crashReporter = store => next => action => {
try {
return next(action);
} catch (err) {
Sentry.captureException(err, { extra: { action, state: store.getState() } });
throw err;
}
};状态快照验证
在关键业务流程中添加状态断言，使用 redux-assert 或自定义中间件验证状态是否符合预期。开发模式下可通过以下代码检测非法状态：
const stateValidator = store => next => action => {
const result = next(action);
if (process.env.NODE_ENV === 'development') {
validateState(store.getState()); // 自定义验证函数
}
return result;
};组件级调试
对于连接 Redux 的组件，使用 React Developer Tools 检查 connect 后的 props 变化。通过 why-did-you-render 库检测不必要的重新渲染：
import whyDidYouRender from '@welldone-software/why-did-you-render';
whyDidYouRender(React, {
trackAllPureComponents: true,
});
