Как получить внутри внешней функции обратного вызова в реагировать саги Redx? - PullRequest
Новая
       28

Как получить внутри внешней функции обратного вызова в реагировать саги Redx?

0 голосов
/ 12 марта 2020

Я использую протокол tus для загрузки файлов, и этот протокол имеет некоторые функции обратного вызова. Я пытаюсь выдать действие и сделать что-то еще, но я вижу, что не могу использовать yield внутри обратного вызова.

Сильфон это фрагмент кода из саги, который содержит функцию обратного вызова. 

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

Я прочитал что-то, связанное с каналами, но не мог понять это очень хорошо, поэтому любая помощь будет оценена.

1 Ответ

1 голос
/ 12 марта 2020

Это отличный вариант использования для каналов, потому что они обрабатывают обратные вызовы событий, как если бы это было так же, как обработка действий 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.`);
}
...