react如何监听store里的变化
监听 Redux Store 变化的几种方法
使用 useSelector Hook（函数组件）
在函数组件中，通过 react-redux 提供的 useSelector Hook 可以订阅 Store 的状态变化。当指定的状态片段更新时，组件会自动重新渲染。
import { useSelector } from 'react-redux';
function MyComponent() {
const data = useSelector((state) => state.someReducer.data);
return <div>{data}</div>;
}使用 connect HOC（类组件）
对于类组件，可以通过 connect 高阶组件将 Store 的状态映射到组件的 props。当映射的状态变化时，组件会重新渲染。
import { connect } from 'react-redux';
class MyComponent extends React.Component {
render() {
return <div>{this.props.data}</div>;
}
}
const mapStateToProps = (state) => ({
data: state.someReducer.data,
});
export default connect(mapStateToProps)(MyComponent);手动订阅 Store（通用方法）
直接通过 Store 实例的 subscribe 方法监听变化，适用于非组件的逻辑或需要精细控制的场景。需注意手动取消订阅以避免内存泄漏。
import store from './store';
const unsubscribe = store.subscribe(() => {
const currentState = store.getState();
console.log('State updated:', currentState);
});
// 取消订阅
unsubscribe();使用 Redux Toolkit 的 createListenerMiddleware
Redux Toolkit 提供监听中间件（Listener Middleware），可以监听特定 action 或状态变化，适合副作用逻辑。
import { createListenerMiddleware } from '@reduxjs/toolkit';
const listenerMiddleware = createListenerMiddleware();
listenerMiddleware.startListening({
predicate: (action, currentState, previousState) => {
return currentState.someReducer !== previousState.someReducer;
},
effect: (action, listenerApi) => {
console.log('State changed:', listenerApi.getState());
},
});注意事项
- 性能优化：
useSelector默认使用严格相等（===）比较状态。若返回新对象（如map/filter结果），需使用浅比较或记忆化（memoization）避免不必要的渲染。 - 订阅粒度：尽量缩小监听范围，避免监听整个 Store 导致性能下降。
- 清理订阅：手动订阅时务必在组件卸载或适当时机调用取消订阅函数。
