在Redux传奇中，如何在一个传奇中调用一个传奇'；这是什么？

在我的React应用程序中，有一个调用后端API来检索一些图表数据的传奇故事。请阅读源代码

function fetchData () {
    return fetch(`${config.base}dashboard_charts.json`)
    .then((response) => {

        if (response.status === 200) {
            return response.json();
        } else if (response.status === 403) {
             return 'logon';
        }
    });
}

function * getData (action) {
    try {
        const charts = yield call(fetchData);

        if (charts === 'logon') {
            yield logon();
        } else {
            yield put({ type: UPDATE_DASHBOARD_CHART, charts });
        }
    } catch (error) {
        yield put({ type: UPDATE_DASHBOARD_CHART, charts: [] });
    }
}

function * logon (action) {
    yield auth();
}

export default function * portfolio () {
    yield [
        takeEvery(FETCH_DASHBOARD_CHART, getData)
    ];
};

在函数fetchData中检查http响应状态，如果状态为200，则直接返回响应。但如果服务器端返回403，则表示客户端需要进行身份验证，因此程序将转到auth（）并执行登录

但是，http响应状态代码检查在某种程度上是应用于所有API调用的通用功能。所以我不想在每一个传奇故事中重复这种代码。为此，我编写了一个服务“responseHandler”，将响应代码检查分组如下：

export default function responseHandler (resp) {
    if (resp.status === 401 || resp.status === 403) {
        yield auth();
    } else if (resp.status === 200) {

    } else {
        console.log('error handling');
    }
};

它将在fetchData中调用

return fetch(`${config.base}dashboard_charts.json`)
    .then((response) => {
        responseHandler(response);
    });

但这种方法永远不会奏效在responseHandler中，yield auth（）无效

---

有人能建议如何更好地设计这种情况下的代码吗？

也许组织几个逻辑是有意义的

首先，可以修改fetch包装器，以便在响应代码的HTTP源代码不满足形成成功结果的预期的情况下，执行转换到catch部分。它将允许以纯承诺的形式保存

fetchData

函数，而无需输入生成器逻辑

其次，

auth

和

logon

函数的本质并不特别清楚。如果根据此类操作的结果生成登录表单，则通过适当的redux操作来实现。如果需要转换到其他页面，请使用

react redux router

function fetchData () {
        return fetch(`${config.base}dashboard_charts.json`).then(response => (
            (response.status === 200) ? response.json() : Promise.reject('logon')
        ));
    }

function* getData (action) {
    try {
        const charts = yield call(fetchData);
        yield put({ type: UPDATE_DASHBOARD_CHART, charts });
    } catch (error) {
        yield put({ type: UPDATE_DASHBOARD_CHART, charts: [] });
        if(error.message === 'logon') {
            yield put({ type: PERMORM_AUTORIZE });
        }
    }
}

export default function * portfolio () {
    yield [ takeEvery(FETCH_DASHBOARD_CHART, getData) ];
};

---

如果您的逻辑更复杂，只需使用

redux saga

中的

fork

。它允许执行更复杂的任务

组织几个逻辑可能有意义

首先，可以修改fetch包装器，以便在响应代码的HTTP源代码不满足形成成功结果的预期的情况下，执行转换到catch部分。它将允许以纯承诺的形式保存

fetchData

函数，而无需输入生成器逻辑

其次，

auth

和

logon

函数的本质并不特别清楚。如果根据此类操作的结果生成登录表单，则通过适当的redux操作来实现。如果需要转换到其他页面，请使用

react redux router

function fetchData () {
        return fetch(`${config.base}dashboard_charts.json`).then(response => (
            (response.status === 200) ? response.json() : Promise.reject('logon')
        ));
    }

function* getData (action) {
    try {
        const charts = yield call(fetchData);
        yield put({ type: UPDATE_DASHBOARD_CHART, charts });
    } catch (error) {
        yield put({ type: UPDATE_DASHBOARD_CHART, charts: [] });
        if(error.message === 'logon') {
            yield put({ type: PERMORM_AUTORIZE });
        }
    }
}

export default function * portfolio () {
    yield [ takeEvery(FETCH_DASHBOARD_CHART, getData) ];
};

如果您的逻辑更复杂，只需使用

redux saga

中的

fork

。它允许执行更复杂的任务