首页 > 解决方案 > 从 Saga 中的 fetch 返回数据到 Redux 树

问题描述

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。我最终了解了[[PromiseValue]] 在 javascript 控制台中的含义以及如何获得它,但这似乎对我不起作用。我尝试.then()了几种添加方式,没有运气。它似乎完全阻止了生成器功能的运行。

如果我只是使用response,我会得到一个没有有效负载的 Response 对象。我在这里想念什么?如何获得正确的有效载荷?

标签: javascriptreduxfetchredux-saga

解决方案


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

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

});
}

推荐阅读