redux saga api call is getting executed multiple times for single button click

Question

I am newbie in Redux Saga, trying to make an API call through Saga but it gets triggered multiple times. Below is my code.

component.js (dispatch action inside my useEffect method)

dispatch({type: updatePrdTrackerStatus.ACCEPTDOCUMENTS_SETUP , payload: {...someValues}});

mySaga.js

`      function* updateAcceptDocumentStatus() {
        const {payload } = yield take( updatePrdTrackerStatus.ACCEPTDOCUMENTS_SETUP );
        const result = yield call(updateTrackerStatusHandler,payload);
        yield put({ type: updatePrdTrackerStatus.ACCEPTDOCUMENTS_SETUP_RESULT , payload:result})
      }

      async function updateTrackerStatusHandler (tracker){
        await http.post("apicall");
        const { data } = await http.post("api call2");
        return data;
       }      
    }

export function* trackerRequestSaga() {
    yield all([
        updateAcceptDocumentStatus(),

    ]);
} 

Result is API 1 and API 2 call is made multiple times. Not sure what I am missing in Saga portion.

Answer 1

I was having an issue with my store configuration file .

 const configStore = () => {
     const store =  createStore(rootReducer,applyMiddleware(...middleWares));
     sagaMiddleWare.run(initSagas)
     return store;
 } 

modified to below then its getting called one time 

const configStore = createStore(rootReducer,applyMiddleware(sagaMiddleWare));
sagaMiddleWare.run(initSagas)
export default configStore;

And i modified the saga function to takeLatest like below in my saga file

 export function* update() {
        yield takeLatest('TAKE_REST',methodName);
  }

Answer 2

You need to put takeLatest into your watcher saga. But you have to also pass what saga should be called as a reference, when a particular action is caught. Should be something like this:

export function* trackerRequestSaga() {
    yield all([
        takeLatest(updatePrdTrackerStatus.ACCEPTDOCUMENTS_SETUP, updateAcceptDocumentStatus),

    ]);
}