React Redux Saga：调用时的奇怪行为 API

Question

我在我正在处理的 React/Redux 项目中使用 sagas。它是一种用于创建和编辑内容的表单。表单可以很好地创建内容，但它不在编辑中。

在这两种情况下，

对端点 returns 的 API 调用。具有相同的状态（200）和数据几乎相同。添加一些 console.log 我意识到在创建时它会到达您将在下面看到的那一行，但在编辑时它不会。这是我唯一的问题，我不明白为什么。代码如下：

export function* performMarcFormActions(action) {

    try {
        const state = yield select();
        const token = state.getIn(['account', 'token']);
        const locale = state.getIn(['language', 'locale']);

        switch (action.type) {
            case constants.MARC_LOAD_NOTICE: {

                console.log('MARC_LOAD_NOTICE SAGA');
                const { instanceId, marcType, resourceType, version } = action;
                
                // the api call. The endpoint returns fine in both cases
                const resp = yield api.fetchMarc(token, instanceId, marcType, resourceType, version);
                console.log('---------------------->>>>>>>>>>>>>>>>>>>', resp); // This line is not reached in the editing

                // code removed for simplicity

                yield put(actions.loadMarcFormSuccess(resp.model, resp.model.listsMap, formFixedFields, formDynamicFields, worksheetFieldsMap, modelFixedFields, modelDynamicFields));

                break;
            }            
            default: {
                console.log(`Action Type Unrecognized in marcSaga.js => ${action.type}`);
                break;
            }
        }
    }
    catch (err) {
        const errorMessage = (err && typeof err === 'object' && err.message) ? err.message : JSON.stringify(err);
        console.log(`Error occurred in marcSaga.js => ${errorMessage}`);
        yield put(globalActions.showError(errorMessage));
    }

    return undefined;
}


export default function* marcFormSaga() {
    yield* takeLatest([
        constants.MARC_LOAD_NOTICE,
        constants.MARC_LOAD_WORKSHEET,
    ], performMarcFormActions);
}

正如我所说，查看浏览器中的网络选项卡，我看到在这两种情况下都触发并返回了请求。但是在编辑中，它正下方那一行的console.log没有达到。

可能是什么原因造成的？

Answer 1

需要使用 call effect 调用 API 和其他外部函数。第一个参数是函数，其余参数是该函数的参数。

const { instanceId, marcType, resourceType, version } = action;
const resp = yield call(api.fetchMarc, token, instanceId, marcType, resourceType, version);
console.log('---------------------->>>>>>>>>>>>>>>>>>>', resp);

React Redux Saga：调用时的奇怪行为 API

React Redux Saga: weird behaviour when calling API

reactjs

redux-saga