Redux-Saga 非 ajax 相关的回调问题

Question

所以，我很难弄清楚如何将以下 example 转换为使用 sagas，因为它不是 ajax 相关的异步问题：

var dogBarkingBuffer = null;
// Fix up prefixing
window.AudioContext = window.AudioContext || window.webkitAudioContext;
var context = new AudioContext();

function loadDogSound(url) {
  var request = new XMLHttpRequest();
  request.open('GET', url, true);
  request.responseType = 'arraybuffer';

  // Decode asynchronously
  request.onload = function() {
    context.decodeAudioData(request.response, function(buffer) {
      dogBarkingBuffer = buffer;
    }, onError);
  }
  request.send();
}

我发现的问题是不是 XMLHttpRequest 相关的东西，而是如何处理只给你返回数据的 decodeAudioData(data, callback)通过回调，因此我想触发一个操作，将其添加到我的 Redux 存储中。

目前我的 saga 看起来像这样，但是 decodeAudio 前面缺少的 yield 似乎是个问题：

import { takeLatest } from "redux-saga";
import { call, put } from "redux-saga/effects";
import axios from "axios";

import * as acts from "actions/playList";


const audioFileRequest = (url) => {
  return axios.get(url, {
    withCredentials: true,
    responseType: "arraybuffer",
  })
  .then(({ data }) => data)
  .catch(({ error }) => error);
};

const decodeAudio = (undecodedData, audioContext) => {
  return audioContext.decodeAudioData(undecodedData, (buffer) => {
    acts.recivedAudioFile(buffer);  // no yeald ???
  });
};

function *fetchAudio({ url, audioContext }) {
  try {
    let rawAudioData = yield call(audioFileRequest, url);
    decodeAudio(rawAudioData, audioContext); // no yield ???
  }
  catch (error) {
    yield put(acts.errorFetchingAudioFile(error));
  }
}

export function *watchFetchAudio() {
  yield takeLatest(acts.AUDIO_FILE_REQUEST, fetchAudio);
}

Answer 1

我认为你可以使用es6-promise转换解码音频功能并使用redux saga调用方法。

const decodeAudio = ({rawAudioData, audioContext}) => {
    return new Promise((resolve, reject) => {
        audioContext.decodeAudioData(rawAudioData, (buffer) => {
            resolve({buffer}); // or reject if failed
        });
    }).then(({buffer}) => buffer).catch(error => error)
};

function *fetchAudio({ url, audioContext }) {
    try {
        let rawAudioData = yield call(audioFileRequest, url);
        let buffer = yield call(decodeAudio, {rawAudioData, audioContext});
        acts.recivedAudioFile(buffer);
    }
    catch (error) {
        yield put(acts.errorFetchingAudioFile(error));
    }
}

Redux-Saga 非 ajax 相关的回调问题

Redux-Saga non-ajax related callback issue

javascript

reactjs

redux-saga