redux-saga实际消耗数据

Question

I have read plenty of tutorials regarding 'redux-saga' and understand how to structure my reducers and sagas to execute directly. The problem that I am having is that I don't know to to actually fetch the data requested in a way that returns something I can use. What do most people use to actually fetch the data requested?

Here is my request saga:

import { call } from 'redux-saga/effects';

export function* request(url, method, body) {
    try {
        const result = yield call(fetch, url, { method: method, body: body });
        return {err: null, res: result };
    } catch(error) {
        return {err: error, res: null };
    }
}

..The "yield call(fetch..." returns a ReadableStream in Chrome and if I use 'isomorphic-fetch' like I did with redux-thunk it returns a promise. I can't use a promise in a generator function from what I can see.

I'm sure this is probably a simple line of code to consume the result, but I can't seem to find it. Any help is appreciated!

Answer 1

So the answer that all of (or most of) the examples on the internet gloss over is that I need to resolve the promise in a wrapper function and then I can use the generator as expected. Following the example here:

Building an image gallery using react, redux and redux-saga

I split my request generator into two separate methods and fully resolved the promise within the helper function. The end result is as follows:

import { call } from 'redux-saga/effects';
import fetch from 'isomorphic-fetch';

const actualRequest = (method, url, body) => {
    return fetch(url, { method: method, body: body })
        .then( response => response.json()
        .then( json => json ));
}

export function* request(method, url, body) {
    try {
        const result = yield call(actualRequest, method, url, body);
        return {err: null, res: result };
    } catch(error) {
        return {err: error, res: null };
    }
}

This still allows me to use 'isomorphic-fetch' as before but still make it into a saga.