如何在redux传奇中访问promise数据

// 定义异步action
const fetchData = () => {
  return (dispatch, getState) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });
    // 异步操作，例如发送网络请求获取数据
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
      })
      .catch(error => {
        dispatch({ type: 'FETCH_DATA_FAILURE', payload: error });
      });
  };
};

// 在组件中触发异步action
import { connect } from 'react-redux';
import { fetchData } from './actions';

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchData();
  }

  render() {
    // 根据异步操作的状态显示相应的内容
    if (this.props.loading) {
      return <div>Loading...</div>;
    } else if (this.props.error) {
      return <div>Error: {this.props.error}</div>;
    } else {
      return <div>Data: {this.props.data}</div>;
    }
  }
}

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

const mapDispatchToProps = {
  fetchData
};

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

// 定义异步操作的saga
import { takeLatest, call, put } from 'redux-saga/effects';
import { fetchDataSuccess, fetchDataFailure } from './actions';

function* fetchDataSaga() {
  try {
    const response = yield call(fetch, 'https://api.example.com/data');
    const data = yield response.json();
    yield put(fetchDataSuccess(data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}

function* rootSaga() {
  yield takeLatest('FETCH_DATA_REQUEST', fetchDataSaga);
}

// 在组件中触发异步action
import { connect } from 'react-redux';
import { fetchDataRequest } from './actions';

class MyComponent extends React.Component {
  componentDidMount() {
    this.props.fetchDataRequest();
  }

  render() {
    // 根据异步操作的状态显示相应的内容
    if (this.props.loading) {
      return <div>Loading...</div>;
    } else if (this.props.error) {
      return <div>Error: {this.props.error}</div>;
    } else {
      return <div>Data: {this.props.data}</div>;
    }
  }
}

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

const mapDispatchToProps = {
  fetchDataRequest
};

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