Redux Saga - 为什么 yield all 不等待 put 操作完成后再继续答案

【问题标题】：Redux Saga - Why does yield all not wait for the put action to complete before proceedingRedux Saga - 为什么 yield all 不等待 put 操作完成后再继续
【发布时间】：2020-10-04 11:00:27
【问题描述】：

我想等待 yieldall 中的所有 put 操作完成，然后再进行下一个 yield。我认为这就是 yieldall 应该达到的目标。我是 Redux Saga 的新手，因此我可能遗漏了一些细节或逻辑。

这是我的 workerAnalytics（第一个使用 dispatch 'ANALYTICS' 调用的工人）

export function* workerAnalytics(action) {
    console.log('here')
    let group = action.group
    yield put({ type: 'SHOW_LOADER', loading: action.loading })
    yield all([
        put({ type: 'BASIC_ANALYTICS', loading: 'client', group: group }),
        put({ type: 'BASIC_ANALYTICS', loading: 'KPI', group: group }),
        put({ type: 'BASIC_ANALYTICS', loading: 'country', group: group }),
        put({ type: 'BASIC_ANALYTICS', loading: 'estimated_revenue' }),
    ])
    console.log('there')
    yield put({ type: 'HIDE_LOADER', loading: action.loading })
}

我的 workerBasicAnalytics（在从调度类型“BASIC_ANALYTICS”调用 watcherBasicAnalytics 之后调用）

export function* workerBasicAnalytics(action) {
    try {
        let data;
        if (action.loading === 'KPI') { yield put({ type: 'SHOW_LOADER', loading: action.loading }) }
        data = action.loading === 'client' ? yield call(() => axiosInstance.get(`/customer-conversion/?group=${action.group}`)) :
            action.loading === 'KPI' ? yield call(() => axiosInstance.get(`/kpi/?group=${action.group}`)) :
                action.loading === 'country' ? yield call(() => axiosInstance.get(`/customer-country/?group=${action.group}`)) :
                    action.loading === 'estimated_revenue' ? yield call(() => axiosInstance.get('/estimated-revenue/')) : null
        yield put({ type: "STORE_DATA", payload: data.data, fetch: action.loading })
        if (action.loading === 'KPI') { yield put({ type: 'HIDE_LOADER', loading: action.loading }) }
        console.log(action.loading)

    } catch (error) {
        console.log(error)
    }
}

如您所见，我的工作程序函数中都有 console.log 来跟踪哪个首先执行。问题是 'there' 是在 'here' 之后记录的，而它应该是在记录 'there' 之前应该记录的单个 workerBasicAnalytics console.log(action.loading)，如 console.log( 'there') 在 yieldall 之后。

感谢所有帮助，谢谢！

【问题讨论】：

标签： redux react-redux redux-saga

【解决方案1】：

您是否检查过是否调用了 workerBasicAnalytics？或者如果你在 catch 处理程序中发现了错误？

更新： 你可以这样做：

yield all([
  workerBasicAnalytics({loading: 'client', group: group}), 
  workerBasicAnalytics({loading: 'KPI', group: group}
)]

【讨论】：

yes workerBasicAnalytics 在 workerBasicAnalytics 结束时被调用为 console.log(action.loading) ，但问题是它在 console.log('there') 之后被记录workerAnalytics 函数，当我将 put(type: "BASIC_ANALYTICS") 包装在 yieldall 中时，情况不应该如此。另外，我将它包裹在 try and catch 中，没有发现任何错误
好吧，问题是put是一个非阻塞的dispatch effect，不等待响应。您可以 putResolve （阻塞）等待分派函数的返回，也可以直接使用 call （阻塞）而不是 put。
在上面更新了您如何使用。当你使用 yield 时，它会等待函数调用完成，而不是等待结果。
是的，你可以使用 call(workerBasicAnalytics, ...args)，它们都是一样的。在 put 的情况下，调用函数并进入下一个 yield，它不等待返回，类似于异步调度函数。
没关系，因为您不期望任何回报，而只是更新状态。