CODEWITHSUNDEEP
reactjsgeneratorreact-router-reduxredux-sagareact-boilerplate
dork
dork

Reputation: 4568

react-boilerplate sagas for new route

In the sample sagas of react-boilerplate, sagas are exported as an array:

export function* defaultSaga() {

}

export default [
  defaultSaga,
];

The default is then injected in routes.js:

...
injectSagas(sagas.default);
...

However, when I added a new route for authentication, I get an error that says saga argument must be a Generator function! even if I only have the default sagas (same as above).

I added the route to routes.js:

//routes.js
export function authRoutes(store) {
  //same code as createRoutes
}

And imported the function to create a new route for the Router in app.js:

//app.js
const rootRoute = {
  component: App,
  childRoutes: createRoutes(store),
};

const authRoute = {
  path: '/auth',
  component: Auth,
  childRoutes: authRoutes(store),
};

const routes = {
  childRoutes: [rootRoute, authRoute],
};

When I try to edit the default of sagas.js to:

export default function* root() {
  yield [
    defaultSaga(),
  ];
}

I get an error injectAsyncSagas: Expected "sagas" to be an array of generator functions. So what I did was to wrap sagas.default in the new route in an array:

//routes.js - authRoutes(store)
importModules.then(([reducer, sagas, component]) => {
  injectReducer('login', reducer.default);
  injectSagas([sagas.default]);
  renderRoute(component);
});

Why am I getting those errors and how can I fix them? (I'm quite new to React and Generators.)

Upvotes: 4

Views: 463

Answers (1)

dork
dork

Reputation: 4568

Whoops. I forgot I called store.runSaga(mySagas) in store.js when I was testing which accepts an array of generator functions. I removed it and the error disappeared.

Upvotes: 1

Related Questions