进行正在进行的PUT回调

Question

我正在使用一个库，它提供了一个.progress回调函数。当进行fetch操作时，会触发此回调。我的做法如下：

    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

- Noitidart

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

注：本网页介绍了Redux Saga库的高级功能——通道，它是用于处理异步事件流的机制。通过创建通道，可以在Saga之间传递消息。

- Lee이민규

---

非常有趣，非常感谢李的回答。我会尝试理解并实施。 - Noitidart

李，这里的“通道”只保留最新的10条消息，我怎样才能设置一个没有限制的“通道”呢？ - Noitidart

我认为你的saga没有在通道中获取进度消息。默认情况下，该通道仅缓冲10条消息。(https://redux-saga.js.org/docs/api/#channelbuffer)您可以设置另一个缓冲区。(https://redux-saga.js.org/docs/api/#buffers) - Lee이민규

谢谢@lee - 你为什么使用yield call(channel)而不是只用channel()？ - Noitidart

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));

- Noitidart