Redux：在匿名函数中产生

Question

So, i am entirely new to Reudx-Saga and i have been testing it a for a few days.

I have a working understanding of generators, actions, redux-stores, sagas and others. Have some good experience with JS overall.

I have a scenario where i have a function as follows:

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

Now, i am trying to put this code inside a generator function, in my saga . I basically need to put an action, but for that, i need to use the yield keyword. I need to put the val returned by the callback using yield put .

I have to make a few other yield call(function..) calls after executing the above requirement. I tried wrapping my function inside a Promise , but the problem with that is, the promise is only getting called only once intemClicked is fired and thus the rest of my yield calls are being blocked.

Is there a way i can yield inside my anonymous function ?

Pardon my wording because i am still learning/understanding Redux-Saga .

Answer 1

The solutions depends on if the callback can be called multiple times or only once.

If it is going to be called only once, you first approach - converting it to promise - was the right one, you just need to use fork to make the wait non-blocking.

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)
}

In case the callback can be called multiple times, you might want to use an 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)
}