Redux：在匿名函数中产生答案

【问题标题】：Redux: yield inside an anonymous functionRedux：在匿名函数中产生
【发布时间】：2021-07-18 22:21:17
【问题描述】：

所以，我对Reudx-Saga 完全陌生，我已经测试了几天。

我对生成器、动作、redux-stores、sagas 等有一定的了解。总体上对 JS 有一定的经验。

我有一个场景，我的功能如下：

project().itemClicked(val => /* do something with */)

现在，我正在尝试将此代码放入生成器函数中，在我的saga 中。我基本上需要put 一个动作，但为此，我需要使用yield 关键字。我需要使用yield put 将回调返回的val 放入。

在执行上述要求后，我必须进行其他几个yield call(function..) 调用。我尝试将我的函数包装在Promise 中，但问题是，只有在intemClicked 被触发时才会调用promise，因此我的其余yield 调用将被阻止。

有没有办法可以在我的匿名函数中yield？

请原谅我的措辞，因为我还在学习/理解Redux-Saga。

【问题讨论】：

你不能从箭头函数中产生，使用 function* () {...} 语法来定义一个（匿名）生成器（我不确定我得到了整个问题，但是我认为这对你很有用）

标签： javascript reactjs redux redux-saga

【解决方案1】：

解决方案取决于回调是可以调用多次还是只调用一次。

如果它只被调用一次，你的第一个方法 - 将它转换为 promise - 是正确的，你只需要使用 fork 来使等待非阻塞。

function * itemClickedSaga() {
  const val = yield new Promise(resolve => {
    project().itemClicked(resolve)
  })
  yield put(someActionCreator(val))
}

function * someSaga() {
  // waits for the promise in different saga
  // using fork to not wait for the call bellow
  yield fork(itemClickedSaga) 
  yield call(somethingSomething)
}

如果回调可以被多次调用，您可能需要使用eventChannel：

function createItemClickedChannel = () => {
  return eventChannel(emitter => {
    project().itemClicked(emitter)
  })
}

function itemClickedSaga(val) {
  yield put(someActionCreator(val))
}

function * someSaga() {
  const itemClickedChannel = yield call(createItemClickedChannel)
  yield takeEvery(itemClickedChannel, itemClickedSaga) 
  yield call(somethingSomething)
}

【讨论】：