为什么 takeLeading redux-sagas 不起作用答案

【问题标题】：Why takeLeading redux-sagas isn't working为什么 takeLeading redux-sagas 不起作用
【发布时间】：2020-09-28 19:13:24
【问题描述】：

我不太清楚为什么takeLeading 对我不起作用（takeLeading 应该接听第一个电话并忽略后续电话，直到返回第一个电话）。它像 takeEvery 一样调用相同的调用 3 次，其挂载钩子上的 useEffect(() => {getApiWatcher(params)}, []) 中的 3 个独立组件具有相同的参数。看起来那些在第二个被调用之前也没有返回，所以我知道这不是 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，但我正在寻找可能出现问题的想法！可能看多了。

【问题讨论】：

在codeandbox上重现会有帮助

标签： reactjs redux react-redux redux-saga

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的，takeLeading 就是我想要的。它在不应该的时候表现得像一个 takeEvery
我已将问题编辑得更清楚，如有任何混淆，我们深表歉意
那么如果没有可重现的例子就很难说为什么会发生。
明白，它在应用程序的某些部分有效，而在其他部分无效，这很奇怪，我不明白为什么。你愿意删除你的答案吗？只是这样人们就不会认为它已经回答了

【解决方案3】：

takeLeading 正在按预期工作。对getApi 的调用会立即返回。

如果getApi 返回一个 Promise，您的代码将按照您希望的方式运行的唯一方法。如果 getApi() 返回一个 Promise，getApiActionEffect 将阻塞直到 Promise 解决。

【讨论】：

我是这么想的，但它显示其他查询仍在网络选项卡中解决