Dispatches an action from different component [react-boilerplate]

Question

I am using react-boilerplate to create a react project.

I have two different components:

In component A has a saga function that should be also called in component B.

When I dispatch an action from component A, the saga function is called correctly, but when I dispatch the same action from component B (I am sure the action is dispatched), the saga function in component A is not called.

Anyone has idea why this happens?

Maybe the actions can not be dispatched from other components?

Thanks!

Answer 1

To call async function that located in other containers, we should include the saga which contains the async functions.

import homeSaga from './saga';
import loginSaga from '../loginPage/saga';

const withHomeSaga = injectSaga({ key: 'home', saga: homeSaga });
const withLoginSaga = injectSaga({ key: 'login', saga: loginSaga });
export default compose(
  withReducer,
  withHomeSaga,
  withLoginSaga,
  withConnect,
)(HomePage);