3

I am new to reactjs and trying to learn saga.

I have built a root saga file as follows.

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

import { watchBookFetchRequest } from './bookSaga'
import { watchAuthRequest, watchIsLoggedInRequest, watchLogoutRequest } from './authSaga'

export default function* rootSaga() {
   yield all([
    watchAuthRequest(),
    watchBookFetchRequest(),
    watchIsLoggedInRequest(),
    watchLogoutRequest()
   ]);
}

For each module, i have created a separate saga file and put all those related actions in that file.

Finally, i took all those actions and combined them in root saga.

I assume, when the project becomes big and more complex and has a lot of modules, all the watchers will be added in the same way like the above code

export default function* rootSaga() {
   yield all([
    watchRequest1(),
    watchRequest2()
    .
    .
    .
    watchRequestn()
   ]);
}

That is, the root saga will be containing quite a lot of watchers - Watchers for login, dashboard, books, accounts and so on..

Is this the correct way of doing this?

1
  • 1
    We just export arrays with the sagas from each module, and then spread them into the array passed to all in the rootSaga
    – sylvanaar
    Feb 11, 2019 at 22:46

3 Answers 3

6

Organising sagas is a lot like organising reducers. You will also probably start up using combineReducers in root reducer with a flat list of all reducers and it can even scale pretty well. Long lists of reducers/sagas aren't usually a source of much problems.

However eventually in both cases you might want to introduce a tree structure. For example if your application looks like this:

+-- services/
|   +-- live-updates/
|   |   +-- live-updates-saga.js
|   +-- local-storage/
|   |   +-- local-storage-saga.js
|   +-- services-saga.js
+-- sections/
|   +-- home/
|   |   +-- home-saga.js
|   +-- contacts/
|   |   +-- contacts-saga.js
|   +-- sections-saga.js
+-- root-saga.js

You might run your sagas this way:

// root-saga.js
function* rootSaga () {
    yield all([
        fork(servicesSaga),
        fork(sectionsSaga),
    ])
}

// services-saga.js
function* servicesSaga () {
    yield all([
        fork(liveUpdatesSaga),
        fork(localStorageSaga),
    ])
}

// sections-saga.js
function* sectionsSaga () {
    yield all([
        fork(homeSaga),
        fork(conactsSaga),
    ])
}

// live-updates/local-storage/local-storage-saga.js
function* liveUpdatesSaga () {
    yield takeEvery(XYZ, xyzSaga)
}

I wouldn't call either solution the "correct" one. Just experiment what suites you better.

0

Quoting Martin...

I wouldn't call either solution the "correct" one. Just experiment what suites you better.

He's right but you want to hear from other devs so: in my current project the file system is organised as Martin showed but the root saga is still elementary

export function* rootSaga() {
  yield spawn(authSaga);

  while (true) {
    yield take(LOGIN_SUCCESS);
    // the indipendent sagas are all started after the LOGIN_SUCCESS action

    const tasks = [
      yield fork(pollBtcValueSaga),
      yield fork(getConfigSaga),
      yield fork(setTimeSaga),
      // and so on...
    ];
    console.log("sagas started");

    yield take([LOGOUT_REQUEST, FREEZE]);

    // the indipendent sagas are all stopped after the LOGOUT_REQUEST (or FREEZE) action
    for (let i = 0, n = tasks.length; i < n; i++) {
      yield cancel(tasks[i]);
    }
    console.log("️sagas stopped");
  }
}

In my root saga the only difference is that I spawn the authentication saga. That makes the auth saga completely independent (like if I would have started with sagaMiddleware.run(rootSaga);).

Then all the other sagas are started after a LOGIN_SUCCESS action and canceled after a LOGOUT_REQUEST one.

I then introduced the FREEZE action just for debugging purposes (I have a lot of network polls and logging that can bore me while debugging).

Anyway as the project grows I'll introduce the organization proposed by Martin.

0

I use InitSagas and call it after initializing the Redux Store

//initSagas.js

import * as sagas from './sagas';

  const initSagas = (sagaMiddleware) => {
    Object.values(sagas).forEach(sagaMiddleware.run.bind(sagaMiddleware));
  };

export default initSagas;

I have a index.js in my Sagas folder and export all sagas from it to consume in InitSagas.js

In my getStore.js

//getSore.js
...

const store = createStore(rootReducer, composeEnhancers(...enhancers));

initSagas(sagaMiddleware);

return store;

Hope this answers your question.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.