title: Saga Function is not being called
body: <p>I am using saga.js with Redux in my project and I am trying to call an API but that API is not being called. The generator function is called, but with <code>yield.put()</code> other method is not being called. I am fairly new to Redux Saga and I am stuck here. Any help would be really appreciated.</p>
  <p><strong>Saga.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import { put, takeEvery, all ,fork, takeLatest} from &quot;redux-saga/effects&quot;;
      import axios from &quot;axios&quot;;
      
      function* runOurAction() {
        let remoteData;
  
        yield axios.get(url).then((resp) =&gt; {
          remoteData = resp.data;
        });
       
        yield put({ type: &quot;SET_DATA&quot;, payload: remoteData });
      };
      
      
      function* getAsyncDataWatcher() {
        yield takeLatest(&quot;GET_TEAMS&quot;, runOurAction);
      }
      
      export default function* rootSaga() {
        yield fork(getAsyncDataWatcher)
      }
  </code></pre>
  <p>getAsyncDataWatcher() is being called but its not calling <code>runOurAction</code></p>
  <p><strong>Reducer.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>    const teams=(state=[],action)=&gt;{
      
         switch(action.type) {
           case &quot;SAVE_TEAMS&quot;:
              return { ...state, payload: action.payload };
      
           case &quot;GET_TEAMS&quot;: 
              return { ...state, payload: action.payload };
      
            case &quot;SET_DATA&quot;:
              return { ...state, payload: action.payload };
        
            default: 
              return state;
          }
      }
      
      export default teams;
  </code></pre>
  <p><strong>Actions.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>      const getTeams = (payload) =&gt; {
          return {
            type: &quot;GET_TEAMS&quot;,
            payload:payload
          };
        };
      
        const saveTeams = (payload) =&gt; {
          return {
            type: &quot;SAVE_TEAMS&quot;,
            payload:payload
          };
        };
        
        export  { saveTeams, getTeams };
  </code></pre>
  <p><strong>index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import React from 'react';
      import ReactDOM from 'react-dom';
      import './index.css';
      import App from './App';
      import * as serviceWorker from './serviceWorker';
      import rootReducer from &quot;./reducers&quot;;
      import createSagaMiddleware from &quot;redux-saga&quot;;
      import { createStore, applyMiddleware ,compose} from &quot;redux&quot;;
      import { Provider } from &quot;react-redux&quot;;
      import rootSaga from &quot;./saga&quot;;
      const sagaMiddleware = createSagaMiddleware();
      const enhancers = [window.__REDUX_DEVTOOLS_EXTENSION__ &amp;&amp; window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(sagaMiddleware)];
      
      const store = createStore(
        rootReducer,
        compose(...enhancers)  
      );
  
      sagaMiddleware.run(rootSaga);
      
      ReactDOM.render(
        &lt;Provider store={store}&gt;
          &lt;App /&gt;
        &lt;/Provider&gt;,
        document.getElementById('root')
      );
      
      // If you want your app to work offline and load faster, you can change
      // unregister() to register() below. Note this comes with some pitfalls.
      // 
      serviceWorker.unregister();
  </code></pre>
  <p><strong>Team.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>    import React,{useEffect} from 'react'
      import {useSelector,useDispatch} from &quot;react-redux&quot;;
      import {getTeams} from &quot;../actions&quot;;
      
      const Team=()=&gt; {
        const data=useSelector(state=&gt;state.teams);
        const dispatch=useDispatch();
      
        useEffect(() =&gt; {
          console.log(&quot;Called&quot;);
          dispatch(getTeams());
        }, [dispatch])
      
        console.log(&quot;hello&quot;,data);
        
        return (
          &lt;div&gt;
             
          &lt;/div&gt;
        )
      }
      
      export default Team
  </code></pre>