javascript - 有没有更简单的方法在 redux-saga 中采取多种操作类型？

Question

我有 redux saga，它应该将产品从数据库获取到 redux 状态。但它有一些依赖项，必须先获取这些依赖项。

const result = yield take(['GET_CATEGORIES_SUCCESS', 'GET_TYPES_SUCCESS'])

页面加载时会单独触发对这些依赖项的请求。问题是它们以随机顺序返回，如果我想继续执行函数的其余部分，我需要接受它们。

我设法用这个疯狂的装置做到了这一点，它确实有效，但是有没有更简单的方法来做到这一点？

另一个问题是，如果两者兼而有之

const result = yield take(['GET_CATEGORIES_SUCCESS', 'GET_TYPES_SUCCESS'])

在 getProductSaga() 甚至可以触发之前返回，然后整个函数就会卡住。

这是这个传奇的完整代码:

export function* getProductSaga(action) {
    try {
        const result = yield take(['GET_CATEGORIES_SUCCESS', 'GET_TYPES_SUCCESS'])
        if (result.type === 'GET_CATEGORIES_SUCCESS') {
            yield take(['GET_TYPES_SUCCESS'])
        } else {
            yield take(['GET_CATEGORIES_SUCCESS'])
        }
        const product = yield call(api.product.get, action.id)
        yield put(getProductSuccess(product))
        yield put(setEditLoadingSuccess(action.id))
    } catch (err) {
        console.error(err.response.data.errors)
    }
}

Answer 1

I managed to do just that with this crazy contraption, which works, but is there easier way to do this?

是的，使用全部。它将运行任意数量的效果，并等待它们全部完成，然后再继续下一行。

export function* getProductSaga(action) {
  try {
    // You can leave off the left hand side if you don't care about the results
    const [categoriesSuccessAction, typesSuccessAction] = yield all([
      take('GET_CATEGORIES_SUCCESS'),
      take('GET_TYPES_SUCCESS'),
    ]);

    const product = yield call(api.product.get, action.id)
    // etc
  } catch (err) {
    console.error(err.response.data.errors)
  }
}

Another problem is that if both of these [...] are returned before getProductSaga() can even fire, then whole function gets stuck.

确实如此。仅当您对这些操作将会发生有合理的预期时，您才会想监听这些操作。不幸的是，由于我不知道应用程序的其余部分是如何构建的，因此我无法提出非常具体的建议。也许您可以检查商店是否包含某些值，如果是，则跳过take。