Saga Function is not being called

Question

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 yield.put() other method is not being called. I am fairly new to Redux Saga and I am stuck here. Any help would be really appreciated.

Saga.js

    import { put, takeEvery, all ,fork, takeLatest} from "redux-saga/effects";
    import axios from "axios";
    
    function* runOurAction() {
      let remoteData;

      yield axios.get(url).then((resp) => {
        remoteData = resp.data;
      });
     
      yield put({ type: "SET_DATA", payload: remoteData });
    };
    
    
    function* getAsyncDataWatcher() {
      yield takeLatest("GET_TEAMS", runOurAction);
    }
    
    export default function* rootSaga() {
      yield fork(getAsyncDataWatcher)
    }

getAsyncDataWatcher() is being called but its not calling runOurAction

Reducer.js

    const teams=(state=[],action)=>{
    
       switch(action.type) {
         case "SAVE_TEAMS":
            return { ...state, payload: action.payload };
    
         case "GET_TEAMS": 
            return { ...state, payload: action.payload };
    
          case "SET_DATA":
            return { ...state, payload: action.payload };
      
          default: 
            return state;
        }
    }
    
    export default teams;

Actions.js

      const getTeams = (payload) => {
        return {
          type: "GET_TEAMS",
          payload:payload
        };
      };
    
      const saveTeams = (payload) => {
        return {
          type: "SAVE_TEAMS",
          payload:payload
        };
      };
      
      export  { saveTeams, getTeams };

index.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    import * as serviceWorker from './serviceWorker';
    import rootReducer from "./reducers";
    import createSagaMiddleware from "redux-saga";
    import { createStore, applyMiddleware ,compose} from "redux";
    import { Provider } from "react-redux";
    import rootSaga from "./saga";
    const sagaMiddleware = createSagaMiddleware();
    const enhancers = [window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(sagaMiddleware)];
    
    const store = createStore(
      rootReducer,
      compose(...enhancers)  
    );

    sagaMiddleware.run(rootSaga);
    
    ReactDOM.render(
      <Provider store={store}>
        <App />
      </Provider>,
      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();

Team.js

    import React,{useEffect} from 'react'
    import {useSelector,useDispatch} from "react-redux";
    import {getTeams} from "../actions";
    
    const Team=()=> {
      const data=useSelector(state=>state.teams);
      const dispatch=useDispatch();
    
      useEffect(() => {
        console.log("Called");
        dispatch(getTeams());
      }, [dispatch])
    
      console.log("hello",data);
      
      return (
        <div>
           
        </div>
      )
    }
    
    export default Team

Answer 1

I think you can't simply call axios function directly that way. You have to wrap it in call a saga-effects which only takes a function as its argument not a Promise resolve, so it would look like:

import { call } from 'redux-saga/effects';

// Wrap in a call which takes a function as argument
const remoteData = yield call(() => axios.get(url).then(response => repsonse.data));

// Or you can simply write in shorter way
const { data: remoteData } = yield call(axios.get, url);

Answer 2

The problem is probably caused by axios.get() as the return is a promise. Try the following:

yield axios.get(url).then((resp) => {
        return resp.data;
      }).then(response => {
         remoteData = response;
      });