what is a better structure for Redux saga

Question

I have thought about the structure of saga and comed up with an approach, but don't know if it is correct or not.

For example, I have multiple saga files, and for each typical saga file, there is one watcher saga watches different actions "concurrently", And then we only need to export this watcher saga as default.

Here is my tentative approach:

I am not sure abot the way I group the watcher sagas

/**
* saga.js
* 
* one watcher saga watch multiple actions concurrently
* However, from my research, I can only see that everyone seems to create 
* multiple watcher sagas, and each watcher only watch single action which is 
* sort of verbose
*/
function* watchSomething() {  
  yield all([
    takeLatest(GET_SOMETHING, callGetSomething),
    takeLatest(GET_SOMETHING_2, callGetSomething_2),
    takeLatest(GET_SOMETHING_3, callGetSomething_3),
  ]);
}
export default watchSomething;

And

/**
* rootSaga.js
* 
* import different watcher sagas from different saga.js files 
*/
 export default function* root() {
   yield all([
     watchSomething(),
     watchSomething_2(), // the others ...
   ]);
 };

score 0 · Accepted Answer · answered Nov 23 '17 at 08:19

I am not sure abot the way I group the watcher sagas

Generally redux-saga is async process manager, and allows to manipulate with subscribing and emitting event in different manners.
Simplest way is consists of using takeEvery / takeLatest functions, and then saga process manager will automatically run independent process (Formally tick callback domain, because ES is single-threaded) for each trapped action.

But you can easily spawn own saga-process by fork effect, and manipulate with actions in custom manner. If control flow on manipulation is same for many actions, you can run generator loop with subsequent handling:

function * manyActionsSaga() {
    let flowPromise = Promise.resolve();
    while(true) {
        const action = yield take(['ACTION_1', 'ACTION_2', 'ACTION_3']);
        yield call(() => flowPromise)
        flowPromise = flowPromise.then(() => {
            // Similar event handling
        })
    }
}

Of course, also you can have one processing function for every actions group, and then bind it respectively with target arguments.

what is a better structure for Redux saga

1 Answers1