title: Redux Saga is not triggering when action type is dispatched
body: <p>I've implemented Redux-saga for the first time. I followed the documentation to create the saga.</p>
  <p>The problem is Saga isn't triggering when the action type is dispatched. Let me elaborate a little.
  I have a saga.js file that contains the watcher and worker saga in it. The root-saga.js just combines all the different sagas. The store.js file contains the basic setup code for the configuration for the sagas.</p>
  <p>I'm dispatching the action type on a useEffect call in a component. The redux dev tool shows the action type is called correctly. Please have a look at the code.</p>
  <p>The expected outcome is, the saga should automatically get called when the action type function is dispatched. The corresponding console logs should be shown.</p>
  <p>Edit 1: Action definitions code are added</p>
  <p>// store.js</p>
  <pre><code>import { createStore, applyMiddleware, compose } from 'redux';
  import createSagaMiddleware from 'redux-saga';
  
  import rootReducer from './reducers/root-reducer';
  import rootSaga from './sagas/root-saga';
  
  const sagaMiddleware = createSagaMiddleware();
  
  const middlewares = [sagaMiddleware];
  
  const store = createStore(
    rootReducer,
    compose(
      window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp;
        window.__REDUX_DEVTOOLS_EXTENSION__(),
      applyMiddleware(...middlewares)
    )
  );
  
  sagaMiddleware.run(rootSaga);
  
  export default store;
  </code></pre>
  <p>// root-saga.js</p>
  <pre><code>import { all, call } from 'redux-saga/effects';
  
  import { dashboardSagas } from './dashboard-sagas';
  
  function* rootSaga() {
    yield all([call(dashboardSagas)]);
  }
  
  export default rootSaga;
  </code></pre>
  <p>// saga.js page</p>
  <pre><code>import { takeLatest, put, call, all } from 'redux-saga/effects';
  import axios from 'axios';
  
  import { DASHBAORD } from '../types/dashboard';
  import { DashboardSuccess, DashboardFail } from '../actions/dashboard';
  import { APIS_ENDPOINTS } from '../../util/api-endpoints';
  
  // watcher saga
  
  export function* fetchDashboardSaga() {
    yield takeLatest(DASHBAORD.START, fetchDashboardAsyncSaga);
  }
  
  // worker saga
  
  function* fetchDashboardAsyncSaga() {
    yield console.log('123');
    try {
      const resp = yield axios.get(APIS_ENDPOINTS.DASHBOARD);
      yield console.log(resp);
      yield put(DashboardSuccess(resp));
    } catch (error) {
      console.log(error);
      yield put(DashboardFail('Something went wrong. Please try again'));
    }
  }
  
  
  export function* dashboardSagas() {
    yield all([call(fetchDashboardSaga)]);
  }
  
  </code></pre>
  <p>// app.js</p>
  <pre><code>import { dashboardStart } from './redux/actions/dashboard';
  
  function App() {
    const dispatch = useDispatch();
  
    useEffect(() =&gt; {
      dispatch(dashboardStart());
    }, [dispatch]);
    return (
      // some dom
    );
  }
  </code></pre>
  <p>// Action definition</p>
  <pre><code>import { DASHBAORD } from '../types/dashboard';
  
  const dashboardStart = () =&gt; {
    return {
      type: DASHBAORD.START,
    };
  };
  
  const DashboardSuccess = (param) =&gt; {
    return {
      type: DASHBAORD.SUCCESS,
      payload: param,
    };
  };
  
  const DashboardFail = (param) =&gt; {
    return {
      type: DASHBAORD.FAILED,
      payload: param,
    };
  };
  
  export { dashboardStart, DashboardSuccess, DashboardFail };
  
  </code></pre>
  <p>Thank you</p>