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

  });
}

学习与sagas配合使用，因此无法将实际数据存储到我的redux存储中。上面的代码将responseBody发送到有效负载给了我一个Promise对象（因为.json()返回了那个对象），它很棒，但是我无法访问已解析的Promise。我最终选择了What does [[PromiseValue]] mean in javascript console and how to do I get it，但这似乎对我不起作用。我尝试以几种方式添加.then()，但不走运。似乎完全阻止了生成器功能的运行。

如果我仅使用response，我将获得一个Response对象，该对象没有有效负载。我在这里想念什么？如何获得正确的有效载荷？

Answer 1

您需要等待服务器发回响应。

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

});
}

Answer 2

我遵循了在此页面上找到的模式，该模式最终为我工作。我不完全理解为什么需要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,
    });
  }
}

将数据从Saga中的获取返回到Redux树

2 个答案: