4

So, I'm new to react-boilerplate and there seems no way to include another saga without effecting the previous saga's functionality (i.e. it doesn't work).

I've tried declaring the sagas as a constant and then passing it in the compose function at the end of the container, but it gives an error that the object is not a function, upon checking utils/injectsaga.js , it is not a function. SO that didn't work for me. I've tried to directly inject the sagas as below.

Injecting multiple reducers works fine, I think on adding the new saga the previous saga gets overwritten? Please suggest me a better way to fix this. 

import sreducer from './reducer';

import ereducer from '../FooCreate/reducer'

import ssaga from './saga';

import esaga from '../FooCreate/saga'


useInjectReducer({ key: 'foo', reducer:sreducer });

useInjectReducer({ key: 'foo', reducer:ereducer });

useInjectSaga({ key: 'foo', saga:ssaga });

useInjectSaga({ key: 'foo', saga:esaga });
Lenvin Gonsalves
  • 43
  • 6
  • Hi Lenvin, I am having the same question, Can I know how did you go with exporting multiple sagas and injecting it once in the component file, Thanks. – Harish Kulkarni Jan 29 '21 at 18:07
  • 1
    @HarishKulkarni Are you using the react-boilerplate? if yes, then you'd have to import the sagas as I've done in the question but you need to make sure the "key" is different. ``` useInjectSaga({ key: 'foo1', saga:ssaga }); useInjectSaga({ key: 'foo2', saga:esaga }); ``` The key should be the container name from which you are exporting the saga. – Lenvin Gonsalves Jan 31 '21 at 17:37

1 Answers1

4

I believe you'll need to create a single saga similar to a rootSaga[1] that handles starting the sub-sagas. Something like:

function* componentSaga() {
  // start the two sagas right away - use a different pattern here depending on
  // how your sagas are structured
  yield all([
    ssaga(),
    esaga(),
  ]);
}

useInjectSaga({key: 'foo', saga: componentSaga});

if your sagas need to be kicked off right away or 

function* componentSaga() {
  yield takeEvery(FOO_ACTION, ssaga);
  yield takeEvery(BAR_ACTION, esaga);
}

useInjectSaga({key: 'foo', saga: componentSaga});

if you want them to be triggered by actions.

[1] https://redux-saga.js.org/docs/advanced/RootSaga.html

azundo
  • 4,972
  • 1
  • 7
  • 17
  • but in this case, both the saga will run together, which is something I don't want, I want each saga to run only when the appropriate action is dispatched, for example. I want ssaga to run when FOO_ACTION is dispatched and esaga to dispatch when BAR_ACTION is dispatched. – Lenvin Gonsalves Aug 14 '19 at 07:44
  • I've edited the answer for the case when you want wait on actions to be dispatched. – azundo Aug 14 '19 at 19:08
  • Has that approach worked for you? I tried that, whenever FOO_ACTION gets dispatched ssaga and esaga both run – Lenvin Gonsalves Aug 17 '19 at 13:08