如何通过react native在sagas中使用异步加载的资源？

import { put, takeEvery, call } from 'redux-saga/effects';
import { Image } from 'react-native';

// 导入相关的action types和actions
import { RESOURCE_REQUEST, resourceSuccess, resourceFailure } from './actions';

// 定义异步加载资源的函数
function* loadResource(action) {
  try {
    // 发起异步请求加载资源
    const resource = yield call(Image.prefetch, action.payload.url);

    // 资源加载成功后，触发成功的action
    yield put(resourceSuccess(resource));
  } catch (error) {
    // 资源加载失败时，触发失败的action
    yield put(resourceFailure(error));
  }
}

// 监听资源请求的action，并调用加载资源的函数
function* watchResourceRequest() {
  yield takeEvery(RESOURCE_REQUEST, loadResource);
}

// 导出saga
export default function* resourceSaga() {
  yield all([
    watchResourceRequest(),
  ]);
}

// 定义资源请求的action type
export const RESOURCE_REQUEST = 'RESOURCE_REQUEST';

// 定义资源请求成功的action type
export const RESOURCE_SUCCESS = 'RESOURCE_SUCCESS';

// 定义资源请求失败的action type
export const RESOURCE_FAILURE = 'RESOURCE_FAILURE';

// 定义资源请求的action
export const resourceRequest = (url) => ({
  type: RESOURCE_REQUEST,
  payload: { url },
});

// 定义资源请求成功的action
export const resourceSuccess = (resource) => ({
  type: RESOURCE_SUCCESS,
  payload: { resource },
});

// 定义资源请求失败的action
export const resourceFailure = (error) => ({
  type: RESOURCE_FAILURE,
  payload: { error },
});

import { RESOURCE_REQUEST, RESOURCE_SUCCESS, RESOURCE_FAILURE } from './actions';

// 定义初始状态
const initialState = {
  loading: false,
  resource: null,
  error: null,
};

// 处理资源请求的reducer
export default function resourceReducer(state = initialState, action) {
  switch (action.type) {
    case RESOURCE_REQUEST:
      return {
        ...state,
        loading: true,
        error: null,
      };
    case RESOURCE_SUCCESS:
      return {
        ...state,
        loading: false,
        resource: action.payload.resource,
      };
    case RESOURCE_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload.error,
      };
    default:
      return state;
  }
}

import { all } from 'redux-saga/effects';
import resourceSaga from './resourceSaga';

export default function* rootSaga() {
  yield all([
    resourceSaga(),
  ]);
}

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { resourceRequest } from './actions';

const ResourceComponent = () => {
  const dispatch = useDispatch();
  const resource = useSelector(state => state.resource);
  const loading = useSelector(state => state.loading);
  const error = useSelector(state => state.error);

  useEffect(() => {
    dispatch(resourceRequest('https://example.com/resource.jpg'));
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error.message}</p>;
  }

  return (
    <div>
      <img src={resource} alt="Resource" />
    </div>
  );
};

export default ResourceComponent;