redux-saga - redux-saga 中的 takeSequential？

Question

我有一个基本的传奇，如下所示:

const mySaga = function* () {
    yield takeEvery("SOME_ACTION_REQUEST", function* (action) {

        const result = yield call(makeApiCall, action.payload); 
        yield put({
            type: "SOME_ACTION_SUCCESS", 
            payload: result
        }); 

    });  
}

现在我遇到的问题是，如果我有两个 "SOME_ACTION_REQUEST" 同时调度，那么我的 redux 调用堆栈如下所示:

SOME_ACTION_REQUEST
SOME_ACTION_REQUEST
SOME_ACTION_SUCCESS
SOME_ACTION_SUCCESS

这搞砸了我的 reducer 中的逻辑。

我想要的是运行每个请求，但等待前一个请求完成后再开始。

即。所以它看起来像:

SOME_ACTION_REQUEST
SOME_ACTION_SUCCESS
SOME_ACTION_REQUEST
SOME_ACTION_SUCCESS

我将如何实现这一目标？

Answer 1

actionChannel 效果可以用来实现这一点。

参见:https://redux-saga.js.org/docs/api/#actionchannelpattern-buffer

const mySaga = function* () {
    const channel = yield actionChannel("SOME_ACTION_REQUEST"); 
    while (true) {
        const action = yield take(channel); 
        const result = yield call(makeApiCall, action.payload); 
        yield put({
            type: "SOME_ACTION_SUCCESS", 
            payload: result
        }); 
    }
}

解释:

我的理解是，actionChannel 效果只是将所有与该模式匹配的传入请求路由到队列中。

take 效果会将它们弹出。

将所有内容放在 while(true) 循环中意味着操作将一次弹出一个，它们需要等待解决所有其他事情(API调用)，然后才能调用下一个。

关于此模式需要注意的一点是，在 redux-dev-tools 中，redux 堆栈仍将如下所示:

SOME_ACTION_REQUEST
SOME_ACTION_REQUEST
SOME_ACTION_SUCCESS
SOME_ACTION_SUCCESS

因为请求会立即添加到 channel 并保持不活动状态，直到它们被弹出。