How to call generator functions with React-Thunk

Question

I'm in the process of converting some sagas to thunks. Some of these sagas have nested generator functions that I'm not able to call within thunks. Normally in a saga I do:

 const result = yield call(myFunction, anotherSaga, params);

However when i try to convert this to thunk like:

export const myAction = createAsyncThunk(
  'myAction',
  async (data: Payload, { dispatch, getState }) => {

     const result = myFunction(anotherSaga, params).next().value;

     console.log(result)
})

console:
    @@redux-saga/IO: true
    combinator: false
    payload: {context: null, args: Array(2), fn: ƒ}
    type: "CALL"

I don't get anything usable as anotherSaga has nested sagas. How can I convert this to a thunk function?

score 0 · Answer 1 · answered May 19 '22 at 13:32

You can't directly call saga from a thunk, the effects that sagas use need to be processed by the saga library.

Some possible workarounds:

a) Convert even the nested saga to non-generator function

b) If the result isn't important you can replace the call with a dispatch instead and then use takeEvery effect to call the saga when such an action is dispatched

c) I wouldn't recommend this, but it is technically possible to run the saga using the saga middleware instance

export const myAction = createAsyncThunk(
  'myAction',
  async (data: Payload, { dispatch, getState }) => {
     const task = sagaMiddleware.run(anotherSaga, params)
     const result = await task.toPromise()
     console.log(result)
})

score 0 · Answer 2 · answered Jun 29 '23 at 13:20

Disclaimer: My answer could be biased as I am the author of the following suggested library.

You can use redux-thaga. You can create a thaga (yes, it is thaga) instead of a thunk and then in its callback you can fork or simply call another saga.

export const myAction = createThagaAction('myAction', function* (data: Payload) {
  const result = yield call(anotherSaga, params);
  console.log(result)
});

function* rootSaga() {
  // make sure to register you thaga worker
  yield takeLatest(myAction, myAction.worker);
}

// somewhere in the code
await dispatch(myAction(data)); // yes, it is await-able

How to call generator functions with React-Thunk

2 Answers2