如何让React组件等待redux存储变量的设置？

import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = ({ data, fetchData }) => {
  useEffect(() => {
    checkData();
  }, []);

  const checkData = () => {
    // 检查redux存储变量的设置情况
    if (!data) {
      // 如果数据未设置，可以显示加载动画或其他等待状态的UI
      fetchData(); // 触发action来获取数据
    }
  };

  return (
    <div>
      {data ? (
        // 显示数据
        <div>{data}</div>
      ) : (
        // 显示加载动画或其他等待状态的UI
        <div>Loading...</div>
      )}
    </div>
  );
};

const mapStateToProps = (state) => ({
  data: state.data,
});

const mapDispatchToProps = (dispatch) => ({
  fetchData: () => dispatch(fetchData()),
});

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);