Is there a way to use multiple redux-sagas without making a huge array in the rootSaga?

Question

Currently, I have 20+ routes in my application. Each of these routes will have multiple API calls, so I plan to use redux-saga to make AJAX calls.

From reading the documentation, it looks like I'll be able to do the following:

1. Each route will have it's own "root" saga, yielding multiple sagas itself.
2. This route specific saga will then be exported to the actual main root saga, which in turn will be passed to createSagaMiddleware.run().

So it will look something like this:

export function* screen1Saga() {
    yield [ ... ]; // different sub-sagas for screen1 route
}

Then in the main saga file, do this:

import { screen1Saga } from './screen1/sagas';

export function* rootSaga() {
    yield [ screen1Saga(), ... ]; // array of route-specific sagas
}  

I believe this should work perfectly fine. But I'm worried about how it will look when 20+ route specific sagas are created. In the root saga, it will just be a huge array of sagas.

Is it possible to do this some other way? Preferably in such a way that route specific sagas are encapsulated within it's corresponding folder without the need to export it all the way to the top of the app structure?

Just curious to see how others have dealt with a large number of sagas.

Answer 1

The React-Boilerplate repo is a pretty good example of some ways to scale a React app. They use a utility file called asyncInjectors, which really just delegates the work of adding sagas by calling sagaMiddleware.run(saga) underneath the hood.