收益调用（…）未调用功能

Question

I am running into issues with the redux-saga api call method and whether it is behaving as intended. The crux of the issue I believe is that the call isn't calling the function passed to it.

Here is the main generator function sendEmail that starts the api call:

/**
 * A POST api call that will send a sendGrid email with csv data as an attachment
 *
 * @param  {object} action object containing the csv data, security key string, fields of CSV, and CSV file name
 *
 */

export function* sendEmail(action) {
  const { payload, security_key, CSVFields, CSVFileName } = action;
  //  API url
  const requestURL = `/api/email?security_key=${security_key}`;
  //  JSON2csvParser options, with the CSV fields
  const opts = { fields: CSVFields };
  //  The CSV data, which is a string
  const CSVData = payload;

  try {
    const parser = new Json2csvParser(opts);
    const csv = parser.parse(CSVData);
    //  create blob with the csv string
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });

    //  instantiate File Reader Web API
    const reader = new FileReader();

    //  when reader finishes reader.readAsDataURL(blob), stepthrough the emailAPI generator
    reader.addEventListener(
      'load',
      () => {
        const gen = emailAPI(requestURL, CSVFileName, reader);
        console.log("gen.next(): ", gen.next());
        console.log("gen.next(): ", gen.next());
        console.log("gen.next(): ", gen.next());
      },
      false,
    );

    //  reader reads the contents of the blob
    reader.readAsDataURL(blob);

    //  error handling of the reader
    reader.onerror = function (error) {
      console.log('Error: ', error);
    };

  } catch (err) {
    console.error(
      'sendEmail: Error occurred while parsing JSON to CSV ',
      err,
    );
  }
}

This generator function sendEmail will call another generator function emailAPI .

This is the code for that generator function emailAPI :

function* emailAPI(url, filename, reader) {
  let readerResult = null
  yield readerResult = reader.result.split(',')[1]
  const requestBody = {
    filename,
    content: readerResult,
  };

  try {
    const response = yield call(request, url, {
      method: 'POST',
      body: JSON.stringify(requestBody),
      headers: new Headers({
        'Content-Type': 'application/json',
        Accept: 'application/json',
      }),
    });
    console.log("response: ", response);
  } catch (err) {
    console.log("err: ", err);
    yield err
  }
}

Stepping through with gen.next() , this what I get in the logs:

As you'll see in the image, the value of the first iterator returns readerResult successfully. The value of the second iterator returns the redux saga call . Before the last iterator (which is when the generator is done) I log response , which returns undefined as does the last iterator.

The function passed to call , request , does work with other sagas. I am logging within the request function to check if it is being called. It is not . This is behaviour I am not expecting, does anyone know why request isn't being called?

EDIT Here is the request function. Just a fetch being passed the url and options.

import 'whatwg-fetch';

/**
 * Parses the JSON returned by a network request
 *
 * @param  {object} response A response from a network request
 *
 * @return {object}          The parsed JSON from the request
 */
function parseJSON(response) {
  if (response.status === 204 || response.status === 205) {
    return null;
  }
  return response.json();
}

/**
 * Checks if a network request came back fine, and throws an error if not
 *
 * @param  {object} response   A response from a network request
 *
 * @return {object|undefined} Returns either the response, or throws an error
 */
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 *
 * @return {object}           The response data
 */
export default function request(url, options) {
  console.log("request    url: ", url);
  return fetch(url, options)
    .then(checkStatus)
    .then(parseJSON);
}

Answer 1

The Problem

The problem is in these lines:

const gen = emailAPI(requestURL, CSVFileName, reader);
console.log("gen.next(): ", gen.next());
console.log("gen.next(): ", gen.next());
console.log("gen.next(): ", gen.next());

I suppose you tried to iterate the generator function manually since you couldn't use yield inside the event handler. redux-saga offers eventChannel for situations like this.

First, let me explain why you got undefined and why request was never called. That is because, yield call(request) will only return an effect descriptor which needs to be handled by the saga middleware. What you're doing here only iterates through the generator, and does nothing to handle the call effect. Also in the third gen.next() , you're passing nothing (equivalent to undefined ) as the yield 's return value. That's the undefined you got in response: undefined console line.

Solution

This is not a complete solution. I hope this will guide you in the right direction. Please ask for clarification in comments if you need.

I have slightly modified your saga code to use event channels. You will need to improve it to exactly match your requirement.

...
import { eventChannel } from 'redux-saga';
...

let fileReaderEventChannel;

export function getFileReaderEventChannel(blob) {
  if (fileReaderEventChannel) {
    fileReaderEventChannel = eventChannel((emit) => {

      //  instantiate File Reader Web API
      const reader = new FileReader();

      //  when reader finishes reader.readAsDataURL(blob), stepthrough the emailAPI generator
      reader.addEventListener(
        'load',
        () => {
          emit({ error: null })
        },
        false,
      );

      //  reader reads the contents of the blob
      reader.readAsDataURL(blob);

      //  error handling of the reader
      reader.onerror = function (error) {
        emit({ error });
      };

      return () => { 
        // Properly close or abort FileReader here.
      };

    });
  }
  return fileReaderEventChannel;
};

/**
 * A POST api call that will send a sendGrid email with csv data as an attachment
 *
 * @param  {object} action object containing the csv data, security key string, fields of CSV, and CSV file name
 *
 */

export function* sendEmail(action) {
  const { payload, security_key, CSVFields, CSVFileName } = action;
  //  API url
  const requestURL = `/api/email?security_key=${security_key}`;
  //  JSON2csvParser options, with the CSV fields
  const opts = { fields: CSVFields };
  //  The CSV data, which is a string
  const CSVData = payload;

  try {
    const parser = new Json2csvParser(opts);
    const csv = parser.parse(CSVData);
    //  create blob with the csv string
    const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });

    // CHECK HERE - START
    const channel = yield call(getFileReaderEventChannel, blob);
    const fileReaderEvent = yield take(channel);
    if (fileReaderEvent.error === null) {
      yield call(emailAPI, requestURL, CSVFileName, reader);
    } else {
      console.log('error', error);
    }
    // CHECK HERE - END

  } catch (err) {
    console.error(
      'sendEmail: Error occurred while parsing JSON to CSV ',
      err,
    );
  }
}

Have a look at the code between CHECK HERE comments and the new function getFileReaderEventChannel .

References:

• https://redux-saga.js.org/docs/advanced/Channels.html#using-the-eventchannel-factory-to-connect-to-external-events
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Generator/next

Answer 2

Basically the problem is unfortunately you can not use yield call(fn,arguments) within a callback in a generator function ( sendEmail in this case) as the callback is expected to be a regular function, not a generator one.

Instead you create a eventChannel within the closure of the generator function ( sendEmail ) and pass eventChannel.emit as the callback. Then you listen into that eventChannel where you can use yield call(fn,arguments)

A simpler use case would be clearer https://redux-saga.js.org/docs/advanced/Channels.html

<!-- language: lang-js -->
import { eventChannel, delay } from "redux-saga";

function* sendEmail(action) {
  const { payload, security_key, CSVFields, CSVFileName } = action;

  //  JSON2csvParser options, with the CSV fields
  const opts = { fields: CSVFields };
  //  The CSV data, which is a string
  const CSVData = payload;

  try {
    const parser = new Json2csvParser(opts);
    const csv = parser.parse(CSVData);
    //  create blob with the csv string
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8" });
    //  instantiate File Reader Web API
    const reader = new FileReader();

    const loadChannel = eventChannel(emit => {
      reader.addEventListener("load", emit, false);
      const unsubscribeFn = () => reader.removeEventListener("load");
      return unsubscribeFn;
    });
    yield spawn(onReaderLoad, loadChannel);
    //  reader reads the contents of the blob
    reader.readAsDataURL(blob);
    //  error handling of the reader
    reader.onerror = console.log;
  } catch (err) {
    console.error("sendEmail: Error occurred while parsing JSON to CSV ", err);
  }
}

function* onReaderLoad(channel) {
  while (true) {
    const event = yield take(channel);
    const content = event.target.result.split(",")[1];
    const requestURL = `/api/email?security_key=${security_key}`;
    const requestBody = {
      CSVFileName,
      content
    };

    try {
      const response = yield call(request, requestURL, {
        method: "POST",
        body: JSON.stringify(requestBody),
        headers: new Headers({
          "Content-Type": "application/json",
          Accept: "application/json"
        })
      });
      console.log("response: ", response);
    } catch (err) {
      console.log("err: ", err);
      yield err;
    }
  }
}

I am aware that you still need to pass CSVFileName to the onReaderLoad generator but I think it would be a nice exercise for you.

I have passed emit as the callback reader.addEventListener("load", emit, false); but instead we could well have passed an anonymous fn and pass any extra arguments reader.addEventListener("load", (event)=> emit {CSVFileName, event}, false);