Вернуть данные из fetch в Saga в Redux tree - PullRequest
Новая
       20

Вернуть данные из fetch в Saga в Redux tree

0 голосов
/ 02 сентября 2018 
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;
            }

  });
}

Научившись работать с сагами, застрял на получении реальных данных в моем магазине редуксов. Приведенный выше код, который отправляет responseBody в полезную нагрузку, дает мне объект Promise (потому что .json() возвращает его), что замечательно, за исключением того, что я не могу получить доступ к разрешенному Promise. Я остановился на Что означает [[PromiseValue]] в консоли javascript и как я могу получить его , но мне кажется, что это не работает. Я попытался добавить .then() несколькими способами, но не повезло. Похоже, что функция генератора вообще не работает.

Если я просто использую response, я получаю объект Response, который не имеет полезной нагрузки. Что мне здесь не хватает? Как получить правильную полезную нагрузку?

Ответы [ 2 ]

0 голосов
/ 03 сентября 2018

Я следовал шаблону, найденному на этой странице, который в итоге работал на меня. Я не совсем понимаю, зачем нужен помощник fetchTree, но без него он не работает. 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,
    });
  }
}
0 голосов
/ 02 сентября 2018

Вам нужно подождать, пока сервер отправит ответ. 

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;
            }

});
}
...