Redux Saga: difference between yield array to fork in the root saga

Question

New to saga, I'm using this in my root saga:

function* rootSaga() {
    yield [
        cycleRoot(), // fetches root
        cycleChain(), // fetch chain
        cycleChatBadge(), // fetches badge
        watchNotifications(), // navigate on ROOT_DONE
        watchNavigation(), // listen to navigation changes
        watchAppState(), // background/foreground
        watchConnection(), // connection chages
    ];
}

It works. However I've seen examples which use:

function* rootSaga() {
    yield fork (cycleRoot);
    yield fork (cycleChain);
    ...
}

Any difference between those two when igniting the root saga?

Answer 1

There are actually two differences here.

1. Using effects vs calling the sagas directly.

The redux-saga library can handle yielding generators directly, however this approach makes it hard to use mocks when writing tests. Instead, you can use the call effect. This code will work exactly the same as your first snippet except it is written declaratively using the call effect. (Also, I am using the all effect here, as yielding an array has been deprecated).

function* rootSaga() {
    yield all([
        call(cycleRoot), 
        call(cycleChain),
        ...
    ]);
}

For a slightly more in-depth insights (including example of a test) I suggest reading this part of redux-saga documentation: https://redux-saga.js.org/docs/basics/DeclarativeEffects.html

You can use the call effect to call both functions and sagas. However, if you are not interested in writing tests and are sure you never will, I found it useful to use the call effect to differentiate between calling sagas (use call) and regular functions (call directly).

2. Using fork instead of call

The second difference is that in your first snippet you are blocking rootSaga execution until all the sagas are finished. To make them non-blocking you can use the fork effect.

function* rootSaga() {
    yield all([
        call(cycleRoot), 
        call(cycleChain),
        ...
    ]);
    console.log('This happens only after all sagas are finished (including fetching etc.')
}

function* rootSaga() {
    yield all([
        fork(cycleRoot), 
        fork(cycleChain),
        ...
    ]);
    console.log('This happens immediately after the sagas are executed - it does not wait for async action like fetching')
}

Again you can read up on non-blocking calls in the documentation: https://redux-saga.js.org/docs/advanced/NonBlockingCalls.html

In conclusion I suggest always using effects (like call/fork) when calling other sagas and to use the fork effect to startup other sagas in root saga unless there is a good reason to block it.