react redux如何调试
使用 Redux DevTools 扩展
Redux DevTools 是浏览器扩展，支持 Chrome、Firefox 和 Edge。安装后，可以在开发者工具中查看 Redux 的状态变化、action 历史记录和时间旅行调试功能。确保在创建 Redux store 时启用 DevTools：
import { createStore } from 'redux';
import rootReducer from './reducers';
const store = createStore(
rootReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);日志中间件
添加 redux-logger 中间件可以记录每个 action 的派发和状态变化。安装后配置到 store 中：
import { applyMiddleware, createStore } from 'redux';
import logger from 'redux-logger';
const store = createStore(
rootReducer,
applyMiddleware(logger)
);检查 Action 和 Reducer
确保 action 类型和 payload 正确传递。在 Reducer 中打印当前状态和 action 可以帮助定位问题：
function counterReducer(state = initialState, action) {
console.log('Current state:', state);
console.log('Action:', action);
switch (action.type) {
case 'INCREMENT':
return { ...state, count: state.count + 1 };
default:
return state;
}
}单元测试
使用 Jest 和 Enzyme 编写测试用例验证 Redux 逻辑。测试 action 创建函数、reducer 和异步操作：
test('should handle INCREMENT action', () => {
expect(reducer({ count: 0 }, { type: 'INCREMENT' }))
.toEqual({ count: 1 });
});组件连接检查
确认组件是否正确连接到 Redux store。检查 mapStateToProps 和 mapDispatchToProps 是否按预期工作：
const mapStateToProps = (state) => ({
count: state.counter.count
});
const mapDispatchToProps = {
increment: () => ({ type: 'INCREMENT' })
};异步操作调试
对于异步操作（如 redux-thunk 或 redux-saga），使用 redux-mock-store 模拟 store 并验证 action 派发：
import configureMockStore from 'redux-mock-store';
import thunk from 'redux-thunk';
const mockStore = configureMockStore([thunk]);
test('async action dispatches correct actions', async () => {
const store = mockStore({});
await store.dispatch(fetchData());
expect(store.getActions()).toMatchSnapshot();
});状态快照比较
在关键流程中保存状态快照，通过比较前后状态差异定位问题：
console.log('Previous state:', store.getState());
store.dispatch({ type: 'SOME_ACTION' });
console.log('Next state:', store.getState());
