Search code examples
javascriptreactjsreduxreact-reduxredux-saga

Redux-Saga takeEvery for multiple actions and one task


I have a watcher similar to this

export default function* watch() {
    yield takeEvery(getProducts, fetchData)
    yield takeEvery(getUser, fetchData)
}

But in this form, it does not work, because fetchData must be run once and only if both getProducts and getUser succeeded

Is it possible to somehow transfer both actions to takeEvery, or is there an analogue of takeEvery, which can accept two or more actions and execute the fetchData function only after the successful execution of all the transferred actions?


Solution

  • You can use all in combination with take to wait for two actions regardless of order.

    export default function* watch() {
        yield all([
            take(getProducts),
            take(getUser)
        ])
        yield call(fetchData)
    }
    

    In case you want to wait for these two actions again once the fetching is done you can wrap it a infinite while cycle:

    export default function* watch() {
        while (true) {
            yield all([
                take(getProducts),
                take(getUser)
            ])
            yield call(fetchData) 
        }
    }
    

    You can also replace the call effect with fork if you don't want to wait for the fetching to be done before waiting for another pair of actions.