当前位置：首页 > React

react如何监听store里的变化

2026-01-25 17:37:16React

监听 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 导致性能下降。
清理订阅：手动订阅时务必在组件卸载或适当时机调用取消订阅函数。

react如何监听store里的变化