做一个进行中的回调

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 库，这里是其 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

和.progress(fn)中的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));

做一个进行中的回调

Doing a put in progress callback

redux-saga