Search code examples
reactjsreduxreact-reduxredux-saga

how can I combine multiple sagas into rootSaga?


I have two sagas and trying to combine to my root saga. However, this is not working as I'd expected.

Here are saga number 1

import { put, takeEvery, all } from 'redux-saga/effects';

// Categories
function* requestAddCategory({ name }) {
  try {
      .....
    }); 
  } catch (err) {
  }
}

export function* watcherSaga() {
  yield takeEvery(type.REQUEST_ADD_CATEGORY, requestAddCategory);
}

export default function* organize() {
  yield all([watcherSaga()]);
}

and saga number 2

import { put, takeEvery, all } from 'redux-saga/effects';

//Login Auth
function* userLogin({ payload }) {
  try {

    });
      },
    });
  } catch (err) {

  }
}

export function* watcherSaga() {
  yield takeEvery(type.USER_LOGIN, userLogin);
}

export default function* userAuthSaga() {
  yield all([watcherSaga()]);
}

I've combined these two sages like this

import { all, fork } from 'redux-saga/effects';
import userAuthSaga from './webServiceSagas/user/userAuth';
import organize from './organize/organize';

export default function* rootSaga() {
  yield all([fork(userAuthSaga)], fork(organize));
}

and it is connected to

import { createStore, applyMiddleware, compose } from 'redux';
import createSagaMiddleware from 'redux-saga';
import rootReducer from './reducers';
import rootSaga from './sagas';

const sagaMiddleware = createSagaMiddleware();
export const store = createStore(
  rootReducer,
  compose(applyMiddleware(sagaMiddleware))
);
sagaMiddleware.run(rootSaga);

Am I missing something here? It worked before I started to organize it and tried with redux-saga webpage method as well. However, I did not quite get how to deal with watcherSaga().


Solution

  • According to the docs you can combine your sagas into root saga this way:

    const [task1, task2, task3] = yield all([ fork(saga1), fork(saga2), fork(saga3) ])