sagaContainer.ts

// let's add a container for all sagas 
import ISaga from "./ISaga";
import { all } from "redux-saga/effects";

export default class SagaContainer {
    private sagas: ISaga[] = [];

    addSaga(saga: ISaga) {
        this.sagas.push(saga);
    }

    register = () => {
        const sagas = this.sagas;
        return function*() {
            yield all(sagas.map(saga => saga.register()));
        };
    };
}

// now we neee configureSaga
export default function configureSagasContainer(diContainer: IDIContainer): SagaContainer {
    // it's a place where we are going to initiate and configure all app sagas 
    
    // if you read my artciles about DependencyInjection Container 
    // https://medium.com/@radzserg/https-medium-com-radzserg-dependency-injection-in-react-part-1-c1decd9c2e7a 
    // we can work with DI container in this case we will initiate our dependencies only once

    // alternatively you can initiate them here
    // const history = createBrowserHistory();
    // import backendApi from "path/to"
    const sagasContainer = new SagaContainer();    
    sagasContainer.addSaga(
        new ParticipantsNumberPageSaga(diContainer.get("BackendApi"), diContainer.get("History"))
    );

    // rest of the sagas we neeed 
    // sagasContainer.addSaga(new CurrentUserSaga());
    return sagasContainer;
}

// export default function configureStore(sagaContainer: SagaContainer): Store { // pass sagaContainer OR
export default function configureStore(container: IDIContainer): Store {
   ... 
   const store = createStore(
    configureReducers(),
    {},
    composeEnhancers(...enhancers)
  );

  const sagaContainer = container.get<SagaContainer>("SagaContainer");
  sagaMiddleware.run(sagaContainer.register());

   ...
}