如何在 React redux 传奇中在外部回调函数中产生？

Question

我正在使用 tus 协议上传文件，这个协议有一些回调函数。我想做的是 yield 一个动作并做其他事情，但我发现我不能在回调中使用 yield .

Bellow 是包含回调的 saga 函数中的一段代码。

const upload = new tus.Upload(payload,
{
            endpoint: `${baseURL}files/`,
            chunkSize: fileChunkSize, 
            headers: { 'Authorization': `Bearer ${jwtToken}`, 'SelectedDatabase': selectedDatabase }, 
            onSuccess: () => {                        
                console.log("Upload Finished");
                toast.done(toastId);
                toastSuccess(`File (${payload.name}) was successfully uploaded.`);
                //yield put(sendFilesSuccess()); TODO: how to call this?
            }
}); 

upload.start();

我阅读了一些与频道相关的内容，但我不是很了解，因此不胜感激。

Answer 1

这是 Channels 的一个很好的用例，因为它们处理事件回调就像处理 Redux 操作一样。要等待并从频道读取，就像执行 take.

一样简单

function uploadChannelCreator(payload, /* ... */) {
  return eventChannel(emitter => {
      const upload = new tus.Upload(payload,
      {
            endpoint: `${baseURL}files/`,
            chunkSize: fileChunkSize, 
            headers: { 'Authorization': `Bearer ${jwtToken}`, 'SelectedDatabase': selectedDatabase }, 
            onSuccess: () => {
                emitter('SUCCESS');
            }
            // ... Emit other messages based on different events (i.e. onFailure)
      }); 

      upload.start();

      return () => {}
    }
  )
}

function* uploadSaga(payload, /* ... */) {
    const chan = yield call(uploadChannelCreator, payload, /* ... */); // 1. Call Channel
    const msg = yield take(chan); // 2. Wait for channel to emit a message

    // Rest of code... (Add error handling if necessary).
    console.log("Upload Finished");
    toast.done(toastId);
    toastSuccess(`File (${payload.name}) was successfully uploaded.`);
}

如何在 React redux 传奇中在外部回调函数中产生？

How to yield inside an external callback function in react redux saga?

reactjs

redux-saga

tus