如何在React Native on button click中使用redux saga取消正在进行的API调用

import { call, put, takeLatest, cancel } from 'redux-saga/effects';
import { fetchDataSuccess, fetchDataFailure } from '../actions';

function* fetchData(action) {
  try {
    const response = yield call(api.fetchData, action.payload);
    yield put(fetchDataSuccess(response.data));
  } catch (error) {
    yield put(fetchDataFailure(error));
  }
}

import { takeLatest } from 'redux-saga/effects';
import { FETCH_DATA_REQUEST, CANCEL_FETCH } from '../constants';
import { fetchData } from './fetchData';

function* watchFetchData() {
  const task = yield takeLatest(FETCH_DATA_REQUEST, fetchData);
  yield take(CANCEL_FETCH);
  yield cancel(task);
}

import React from 'react';
import { View, Button } from 'react-native';
import { connect } from 'react-redux';
import { fetchDataRequest, cancelFetch } from '../actions';

const MyComponent = ({ fetchData, cancelFetch }) => (
  <View>
    <Button title="Fetch Data" onPress={fetchData} />
    <Button title="Cancel Fetch" onPress={cancelFetch} />
  </View>
);

const mapDispatchToProps = {
  fetchData: fetchDataRequest,
  cancelFetch: cancelFetch,
};

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

import { FETCH_DATA_REQUEST, CANCEL_FETCH } from '../constants';

export const fetchDataRequest = () => ({
  type: FETCH_DATA_REQUEST,
  payload: { /* API调用所需的参数 */ },
});

export const cancelFetch = () => ({
  type: CANCEL_FETCH,
});