如何限制我的react-redux应用程序仅在所需数据不可用时发出API请求？

// 定义Redux action types
const FETCH_DATA_REQUEST = 'FETCH_DATA_REQUEST';
const FETCH_DATA_SUCCESS = 'FETCH_DATA_SUCCESS';

// 定义Redux actions
const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST
});

const fetchDataSuccess = (data) => ({
  type: FETCH_DATA_SUCCESS,
  payload: data
});

// 定义Redux reducer
const initialState = {
  data: null,
  isDataAvailable: false
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_DATA_REQUEST:
      return {
        ...state,
        isDataAvailable: false
      };
    case FETCH_DATA_SUCCESS:
      return {
        ...state,
        data: action.payload,
        isDataAvailable: true
      };
    default:
      return state;
  }
};

// 定义React组件
class MyComponent extends React.Component {
  componentDidMount() {
    const { fetchData } = this.props;
    fetchData();
  }

  render() {
    const { data, isDataAvailable } = this.props;

    if (!isDataAvailable) {
      return <div>Loading...</div>;
    }

    return <div>{/* 渲染组件内容 */}</div>;
  }
}

// 将Redux state映射到组件的props
const mapStateToProps = (state) => ({
  data: state.data,
  isDataAvailable: state.isDataAvailable
});

// 将Redux actions映射到组件的props
const mapDispatchToProps = (dispatch) => ({
  fetchData: () => {
    dispatch(fetchDataRequest());

    // 发出API请求，获取数据
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => dispatch(fetchDataSuccess(data)))
      .catch(error => {
        // 处理错误
      });
  }
});

// 使用React-Redux的connect函数连接组件
const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(MyComponent);