Return data from fetch in Saga to Redux tree

Question

export function* onFetchTree() {
  yield takeLatest('FETCH_TREE', function* () {
    try {
        const response = yield call(fetch, '/myApi/user', {
                    method: 'GET',
                    headers: {
                        accept: 'application/json'
                    }
                })
                const responseBody = response.json();
                yield put({ type: 'SET_TREE', payload: responseBody });
            } catch (e) {
                // yield put(fetchFailed(e));
        return;
            }

  });
}

Learning to work with sagas, stuck on getting the actual data into my redux store. The above code which sends responseBody to the payload gives me a Promise object (because .json() returns that) which is great, except that I can't access the resolved Promise. I ended up on What does [[PromiseValue]] mean in javascript console and how to do I get it but this doesn't seem to work for me. I've tried adding .then() in a few ways, no luck. It seems to prevent the generator function from running at all.

If I just use response I get a Response object, which doesn't have the payload. What am I missing here? How do I get the right payload?

Victor Oliveira · Answer 1 · 2018-09-02T21:03:16.870

0

You need to wait for the server to send back the response.

export async function* onFetchTree() {
yield takeLatest('FETCH_TREE', function* () {
    try {
        const response = yield call(fetch, '/myApi/user', {
                    method: 'GET',
                    headers: {
                        accept: 'application/json'
                    }
                })
                const responseBody = await response.json()

                yield put({ type: 'SET_TREE', payload: responseBody )} 
                };

            } catch (e) {
                // yield put(fetchFailed(e));
        return;
            }

});
}

edited Sep 02 '18 at 21:03

answered Sep 02 '18 at 20:20

Victor Oliveira

1,109
1
12
29

Thanks, but that doesn't compile. I get "yield is a reserved word". – jmargolisvt Sep 02 '18 at 20:23
try it now, I am not very familiar with yield – Victor Oliveira Sep 02 '18 at 20:31
Thought of making that inner function a generator too, but that function simply doesn't run after the fetch is made. – jmargolisvt Sep 02 '18 at 20:35
Give it another try, now I am using async / await. Did not test so I am not sure if that is the correct syntax – Victor Oliveira Sep 02 '18 at 21:03

score 0 · Answer 2 · answered Sep 02 '18 at 21:14

I followed a pattern I found on this page that ended up working for me. I don't fully understand why the fetchTree helper is needed, but it doesn't work without it. https://www.sigient.com/blog/managing-side-effects-with-redux-saga-a-primer-1

function fetchJson(url) {
  return fetch(url, {
        method: 'GET',
        headers: {
            accept: 'application/json'
        }
    })
    .then(response => {
        if (!response.ok) {
            const error = new Error(response.statusText);
            error.response = response;
            throw error;
        }

        return response.json();
    });
}

function fetchTree() {
  return fetchJson('/myApi/user');
}

export function* onFetchTree() {
  try {
    const tree = yield call(fetchTree);

    yield put({ type: 'SET_TREE', payload: tree });
  } catch (e) {
    yield put({
      type: 'ERROR',
      payload: e,
      error: true,
    });
  }
}

Return data from fetch in Saga to Redux tree

2 Answers2