redux-saga - 做一个进行中的回调

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 中删除 super 明星，它就会触发并且我会看到 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中的channel 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