React-Redux中的页面加载时未调度操作

// 定义异步操作的action
const fetchData = () => {
  return (dispatch) => {
    // 发起API请求或其他异步操作
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 将获取的数据存储到Redux store中
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
      });
  };
};

// React组件
class MyComponent extends React.Component {
  componentDidMount() {
    // 在组件加载完成后调度异步操作
    this.props.fetchData();
  }

  render() {
    // 使用从Redux store中获取的数据来渲染组件
    return (
      <div>
        {this.props.data.map(item => (
          <div key={item.id}>{item.name}</div>
        ))}
      </div>
    );
  }
}

// 将Redux store中的数据绑定到组件的props上
const mapStateToProps = (state) => {
  return {
    data: state.data
  };
};

// 将异步操作的action绑定到组件的props上
const mapDispatchToProps = (dispatch) => {
  return {
    fetchData: () => dispatch(fetchData())
  };
};

// 使用connect函数连接React组件和Redux store
export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);