Question

我正在使用提供.progress回调的库。它执行获取并在进行中触发此回调。我是这样做的：

    const res = yield call(function fetchDownload() {
        return RNFetchBlob.config({ fileCache:true }).fetch('GET', url)
        .progress(function* progressDownload(received, total) {
            console.log(`progressed received: "${received}" total: "${total}"`);
            yield put(update(url, { progress:received/total }));
        });
    });

但progressDownload回调永远不会触发。如果我从function* progressDownload删除了超级明星，那么它会触发，我会看到console.log，但是put没有效果。

我正在使用RNFetchBlob，一个React Native lib，这里是progress回调者的文档 - https://github.com/wkh237/react-native-fetch-blob/#user-content-uploaddownload-progress

Answer 1

function* progressDownload() {...}是一个生成器函数，而不是普通函数。

请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function%2A

fn中的.progress(fn)应该是一个简单的函数。所以不调用生成器函数。如果要将进度值放入redux，可以在redux-saga中使用通道api。

如下所示

import {channel} from 'redux-saga';
import {/*... effects */} from 'redux-saga/effects;

//....

const progressChan = yield call(channel);
const putProgressToChannel = (received, total) => progressChan.put({received, total});

yield fork(updateProgressSaga, progressChan)

...blahblah.progress(putProgressToCahnnel);

//....

function* updateProgressSaga(progressChan) {
    while(true) {
        const {received, total} = take(progressChan);
        put(....);
    }
}

查看更多https://redux-saga.js.org/docs/advanced/Channels.html

Answer 2

感谢@Lee：

，这是我的解决方案

const url = 'blah.com';

const progressChan = channel();
const progressTask = yield fork(
    function*() {
        while (true) {
            const { percent } = take(progressChan);
            yield put(update(url, { progress:percent }));
        }
    }
);

const res = yield call(
    RNFetchBlob.config({ fileCache:true }).fetch('GET', url)
    .progress((received, total) => progressChan.put({ type:'PROGRESS', percent:received/total })
);

yield cancel(progressTask);

yield put(setProgress(100));

正在进行回调

2 个答案: