为什么 takeLeading redux-sagas 不起作用

Question

我不太清楚为什么 takeLeading 对我不起作用（takeLeading 应该接受第一个调用并忽略后续调用，直到第一个被 returned）。它像 takeEvery 一样调用相同的调用 3 次，使用来自 3 个独立组件的相同参数在它们的 useEffect(() => {getApiWatcher(params)}, []) on mount 挂钩上。看起来那些在第二次调用之前没有 return 所以我知道这不是 3 个独特的独立调用。

function getApi(params) {
    console.log('GET CALL') // called 3 times in console and network tab
    return Api.doCall(
        `API/${params.number}/${params.type}`,
        'GET'
    );
}

function* getApiActionEffect(action) {
    const { payload } = action;
    try {
        const response = yield call(getApi, payload);
        yield put(getApiSuccess({ data: response.data, status: response.status }));
    } catch (e) {
        yield put(getApiError(e.response));
    }
}

export function* getApiActionWatcher() {
    yield takeLeading( // should make sure only first call is made and subsequent are ignored
        GET_API_WATCHER,
        getApiActionEffect
    );
}


// action
export function getApiWatcher(payload) {
    return { type: GET_API_WATCHER, payload };
}

// passed dispatch as props
const mapDispatchToProps = (dispatch) => bindActionCreators( { getApiWatcher, }, dispatch ); 

// root saga
export default function* rootSaga() {
    yield all([... getApiActionWatcher(),...])
}

涉及更多代码，因此我没有创建示例 jsfiddle，但我正在寻找可能出错的想法！可能看漏了一些东西。

Answer 1

如果你想处理每个 GET_API_WATCHER 动作，那么你最好 takeEvery redux-saga helper.

并且 docs 表示使用 takeLeading 生成的任务会阻塞其他任务，直到它完成。

Answer 2

takeLeading 正在按预期工作。对 getApi 的调用立即 returns.

如果 getApi return 是一个 Promise，您的代码才能按您希望的方式工作的唯一方法。如果 getApi() 是 return 一个 Promise，那么 getApiActionEffect 会阻塞直到 Promise 解决。

Answer 3

原来在 root saga 中有重复的导入函数。例如：

// root saga
export default function* rootSaga() {
    yield all([
        ... getApiActionWatcher(),...
        ... getApiActionWatcher(),...
    ])
}

删除重复项解决了问题。它还删除了我没有处理的其他重复调用。

为什么 takeLeading redux-sagas 不起作用

Why takeLeading redux-sagas isn't working

reactjs

redux

redux-saga

react-redux