Ducks + sagas

I use ducks modules i my projects. I think that sagas must be a part of ducks module. But there is a problem with watchers-sagas that we must run. I write lite saga-manager class, which help me to create root saga. Its usage looks like this:

/* 
* auth module
*/

// reducer, actions....

// sagas
function *fetchAuthSaga () { ... }
function *loginSaga () { ... }
function *logoutSaga () { ... }

sagasManager.addSagaToRoot(function *watcher() {
  yield [
    takeEvery(FETCH, fetchAuthSaga),
    takeEvery(LOGOUT, logoutSaga),
    takeEvery(LOGIN, loginSaga),
  ];
});

I do the same things in all modules with sagas. Then i just run root saga:

// index.js
const store = configureStore();

store.runSaga(sagasManager.getRootSaga());

I think that sagasManager is missing part of redux-saga library even if you dont use ducks modules. In a large project there are a lot of sagas in separate files.

Here my implementation of sagasManager:

import { fork } from 'redux-saga/effects';

class SagasManager {
  constructor() {
    this.sagasWithArguments = [];
  }

  addSagaToRoot(...sagaWithArguments) {
    this.sagasWithArguments.push([...sagaWithArguments]);
  }

  getRootSaga() {
    const self = this;

    return function *rootSaga() {
      yield self.sagasWithArguments.map((sagaWithArguments) => fork(...sagaWithArguments));
    };
  }
}

export default new SagasManager;

PS: Sorry my poor English

[Andarist]

@kamleshchandnani just use this in ur split bundle

sagaMiddleware.run(function *watcher() {
  yield all([
    takeEvery(FETCH, fetchAuthSaga),
    takeEvery(LOGOUT, logoutSaga),
    takeEvery(LOGIN, loginSaga),
  ]);
})

or depending on how much involved in this sagasManager you are you may need to tweak it a little bit. i.e. like this:

import { all, flush, fork, take } from 'redux-saga/effects';
import { channel } from 'redux-saga';

class SagasManager {
  constructor() {
    this.sagasWithArguments = channel();
  }

  addSagaToRoot(...sagaWithArguments) {
    this.sagasWithArguments.put([...sagaWithArguments]);
  }

  getRootSaga() {
    const sagasChannel = this.sagasWithArguments;

    return function *rootSaga() {
      const initialSagas = yield flush(sagasChannel);
      yield all(initialSagas.map((initialSagaWithArguments) => fork(...initialSagaWithArguments)));
      
      while (true) {
        const dynamicSaga = yield take(sagasChannel)
        yield fork(...dynamicSaga)
      }
    };
  }
}

export default new SagasManager;

[Andarist]

Inspect with a debugger this line const initialSagas = yield flush(sagasChannel); - somehow sagasChannel is referencing loginSaga (or some similar one), when it should be a channel’s instance. Should be easily fixable - I’ve written this tweaked code in a rush and ofc didnt test it properly.