React redux saga中API调用完成后在react组件中调用方法

import { call, put, takeEvery } from 'redux-saga/effects';
import { apiCallSuccess, apiCallFailure } from './actions';
import { fetchData } from './api';

function* handleApiCall(action) {
  try {
    const response = yield call(fetchData, action.payload);
    yield put(apiCallSuccess(response));
  } catch (error) {
    yield put(apiCallFailure(error));
  }
}

function* watchApiCall() {
  yield takeEvery('API_CALL_REQUEST', handleApiCall);
}

export default function* rootSaga() {
  yield all([
    watchApiCall(),
    // other sagas...
  ]);
}

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

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

  return (
    // component JSX
  );
};

const mapDispatchToProps = {
  fetchData: apiCallRequest,
};

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

// actions.js
export const apiCallRequest = () => ({
  type: 'API_CALL_REQUEST',
});

export const apiCallSuccess = (data) => ({
  type: 'API_CALL_SUCCESS',
  payload: data,
});

export const apiCallFailure = (error) => ({
  type: 'API_CALL_FAILURE',
  payload: error,
});

// reducer.js
const initialState = {
  data: null,
  error: null,
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'API_CALL_SUCCESS':
      return {
        ...state,
        data: action.payload,
        error: null,
      };
    case 'API_CALL_FAILURE':
      return {
        ...state,
        data: null,
        error: action.payload,
      };
    default:
      return state;
  }
};

export default reducer;