redux某个数据发生变化 用到数据的组件怎么监听触发重新渲染
Redux中的数据变化是通过dispatch一个action来触发的,而组件可以监听Redux store中的数据变化来重新渲染。
- 使用connect函数连接组件和Redux store
通过connect函数,把组件和Redux store连接起来,这样组件就可以监听store中数据的变化了。在connect函数中,可以通过mapStateToProps函数把需要监听的数据映射到组件的props中。
import { connect } from 'react-redux';
const mapStateToProps = (state) => {
return {
data: state.data,
};
}
export default connect(mapStateToProps)(MyComponent);
- 在组件中使用监听的数据
在组件中使用Redux store中的数据时,直接使用props中的数据即可。当Redux store中的数据发生变化时,props也会相应地更新。
import React from 'react';
const MyComponent = (props) => {
const { data } = props;
return (
<div>{data}</div>
);
}
export default MyComponent;
当Redux store中的数据发生变化时,组件会自动重新渲染,从而更新UI
原文地址: https://www.cveoy.top/t/topic/eguY 著作权归作者所有。请勿转载和采集!