React-boilerplate: Navbar with async actions

Created on 14 Jun 2016 · 4Comments · Source: react-boilerplate/react-boilerplate

Hi folks, I've got a navbar in containers/App/index.js, since it's used throughout the whole site I figured this was a good place to start. The navbar has a logout button triggering a LOGOUT action. The problem I'm having is running the async logout action, I added a sagas.js to containers/App with the appropriate code to hit my backend api and logout but it never executes. I can see that with other components sagas are explicitly wired up in routes.js - how do I go about doing this for App sagas? Or if that's not possible or recommended, how do I import a (navbar) container and use it in containers/App/index?

Source

kunal-mandalia

Most helpful comment

Any cleaner way of doing this, i.e. once and for all?

Augustin82 on 15 Jun 2016

👍3

All 4 comments

Got this working by injecting the App sagas for each Page in app/routes.js:

      getComponent(nextState, cb) {
        const importModules = Promise.all([
          System.import('containers/App/sagas'),
          System.import('containers/DashboardPage/sagas'),
          System.import('containers/DashboardPage'),
        ]);

        const renderRoute = loadModule(cb);

        importModules.then(([appSagas, dashboardSagas, component]) => {
          injectSagas(appSagas.default);
          injectSagas(dashboardSagas.default);
          renderRoute(component);
        });

        importModules.catch(errorLoading);
      }

kunal-mandalia on 14 Jun 2016

Any cleaner way of doing this, i.e. once and for all?

Augustin82 on 15 Jun 2016

👍3

My way:

in app.js, after line

const store = configureStore(initialState, browserHistory);

call

store.runSaga(<your saga defined in app container>)