Pass arguments to saga dispatch - and get the argument to the handler

Question

This is my saga right now:

function* upAsyncSaga() {
    yield takeEvery(UP_ASYNC, upAsyncHandler);
}

And here is the related sync material:

const UP_ASYNC = 'UP_ASYNC';
export function upAsync() {
    return {
        type: UP_ASYNC
    }
}
function* upAsyncHandler() {
    yield call(wait, 1000);
    yield put(up());
}

const UP = 'UP';
export function up() {
    return {
        type: UP
    }
}

I trigger the upAsyncSaga by doing this store.dispatch(upAsync()). However I want to pass an argument called times. So I want to do store.dispatch(upAsync(3)) and then i hope/want to get the argument to the handler like this pseudocode:

export function upAsync(times) { // this is the argument "times"
    return {
        type: UP_ASYNC
        times // here it is again
    }
}
function* upAsyncHandler(times) { // i want the argument to get to the handler
    for (let i=0; i<times; i++) {
        yield call(wait, 1000);
        yield put(up());
    }
}

Is this possible?

Answer 1

When we dispatch any action to store, we can include the arguments (payload) like this:

store.dispatch( { type: UP_ASYNC, payload : { times: 2 }})

modify your function:

export function upAsync(type, payload) {
  const { type, times } = payload
    return {
        type: type,
        times: times
    }
}

I am unsure how your full store implementation is, but if you are following redux-saga, the above should fix you problem.

Edit:

If you have redux store which has effects (I believe), then you can simply execute an action like this:

dispatch({type: '<namespace>/upAsyncHandler', payload: {type: UP_ASYNC, times: 2}})

Here, 'namespace' means your namespace in redux store where your handler is defined as an effect. See below:

*upAsynHandler(action, { call }) {
  const { type, times } = action
  const res = yield call(wait, times)
}