Redux中的数据变化是通过dispatch一个action来触发的,而组件可以监听Redux store中的数据变化来重新渲染。

  1. 使用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);
  1. 在组件中使用监听的数据

在组件中使用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

redux某个数据发生变化 用到数据的组件怎么监听触发重新渲染

原文地址: https://www.cveoy.top/t/topic/eguY 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录