Why API is getting called twice in redux-saga?

[iamrahman]

So, I am trying to dispatch an action to get a request. But I can see that the API is getting called twice but the action dispatched once. Please Help in this -

I did console.log() in both function forgetPasswordSaga and onForgetPasswordButtonClick Result : forgetPasswordSaga is called twice and onForgetPasswordButtonClick called once Component

const Login = (props: Props) => {
 const { dispatch } = props;

 const onForgetPasswordButtonClick = (data: ForgetPasswordData) => {
         dispatch({
           type: 'LOGINPAGE_FORGET_PASSWORD_REQUEST',
           payload: { data },
         });
      };
 
 const mapStateToProps = (state: any) => {
   const { loading } = state.ui;
   return {
     loading
   };
 };

 export default connect(mapStateToProps, null)(Login);

Saga

const forgetPasswordSaga = function* (action: Action) {
      try {
        const response = yield call(forgetPassword, action.payload);
        yield put({ type: FORGET_PASSWORD_SUCCESS });
        Router.go(RoutePath.LOGIN);
        return response;
      } catch (e) {
        yield put({ type: FORGET_PASSWORD_FAIL });
        yield put({ type: ERROR_SET, metadata: { message: Error.getErrorMessage(e) } });
      }
    };
    
    export default [
      takeLatest('LOGINPAGE_FORGET_PASSWORD_REQUEST', forgetPasswordSaga),
    ];

[Roeefl]

@iamrahman This has been happening to me as well with a project for the past 7-8 months. If you did / do find a solution , please post it here as well

[iamrahman]

@Roeefl There could be many possibilities from which this problem could occur. In my case, I was working with multiple sagas. So there is a function called rootSaga where all the other sagas are mentioned.

I was calling the authSaga twice

export default function* rootSaga() {
  yield all([
    ...assetSaga,      
    ...authSaga,       // here
    ...clientSaga,
    ...fileSaga,
    ...formatSaga,
    ...messagingSaga,
    ...notificationSaga,
    ...projectSaga,
    ...userSaga,
    ...authSaga,        // and here
  ]);

[BuistvoPloti]

same here

[rehanmohiuddin]

Thanks @iamrahman i was calling twice in rootSaga removing one solved my bug

[tuanhai2712]

Same here, so now any one help me fix it ! :(

[handhikadj]

I'm also having this issue

UPDATE: solved. I think I also had duplicated root saga call

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[neurosnap]

Closing due to inactivity. Please feel free to reply if you are still having this issue and I’d be happy to help debug.

[mastercodebegin]

@Roeefl There could be many possibilities from which this problem could occur. In my case, I was working with multiple sagas. So there is a function called rootSaga where all the other sagas are mentioned.

I was calling the authSaga twice

export default function* rootSaga() {
  yield all([
    ...assetSaga,      
    ...authSaga,       // here
    ...clientSaga,
    ...fileSaga,
    ...formatSaga,
    ...messagingSaga,
    ...notificationSaga,
    ...projectSaga,
    ...userSaga,
    ...authSaga,        // and here
  ]);

thanks alot man same problem i was doing i spent approx 3 hours.................

[KarthikBaleneni]

@Roeefl There could be many possibilities from which this problem could occur. In my case, I was working with multiple sagas. So there is a function called rootSaga where all the other sagas are mentioned.

I was calling the authSaga twice

export default function* rootSaga() {
  yield all([
    ...assetSaga,      
    ...authSaga,       // here
    ...clientSaga,
    ...fileSaga,
    ...formatSaga,
    ...messagingSaga,
    ...notificationSaga,
    ...projectSaga,
    ...userSaga,
    ...authSaga,        // and here
  ]);

You Saved my day. Thank you,.

[Roeefl]

@kartiikeyabaleneni I wish I could say the same 😭 but I'm glad to hear that you have managed to resolve the issue

[neurosnap]

Hi @Roeefl

How can I help? If you share some code I'll be happy to help debug. Sharing at least the root saga will get us started.

[Roeefl]

@neurosnap Hey man, thank you! I missed your response. Sorry. I'll attach some code tomorrow when I'm working.

[subhadeepquantiantech]

any solution?

[Andarist]

You can't expect to get any help with an unknown problem - please share a runnable repro case so we can take a look and give you some advice.

[hafizSiddiq7675]

any workaround for this? I am also facing the same issue..

[neurosnap]

Hi @hafizSiddiq7675

Please provide a link to your source code or code sandbox replicating the behavior in order for us to best help.

[Chanaka97n]

I'm also having this issue

UPDATE: solved. I think I also had duplicated root saga call

I

So, I am trying to dispatch an action to get a request. But I can see that the API is getting called twice but the action dispatched once. Please Help in this -

I did console.log() in both function forgetPasswordSaga and onForgetPasswordButtonClick Result : forgetPasswordSaga is called twice and onForgetPasswordButtonClick called once Component

const Login = (props: Props) => {
 const { dispatch } = props;

 const onForgetPasswordButtonClick = (data: ForgetPasswordData) => {
         dispatch({
           type: 'LOGINPAGE_FORGET_PASSWORD_REQUEST',
           payload: { data },
         });
      };
 
 const mapStateToProps = (state: any) => {
   const { loading } = state.ui;
   return {
     loading
   };
 };

 export default connect(mapStateToProps, null)(Login);

Saga

const forgetPasswordSaga = function* (action: Action) {
      try {
        const response = yield call(forgetPassword, action.payload);
        yield put({ type: FORGET_PASSWORD_SUCCESS });
        Router.go(RoutePath.LOGIN);
        return response;
      } catch (e) {
        yield put({ type: FORGET_PASSWORD_FAIL });
        yield put({ type: ERROR_SET, metadata: { message: Error.getErrorMessage(e) } });
      }
    };
    
    export default [
      takeLatest('LOGINPAGE_FORGET_PASSWORD_REQUEST', forgetPasswordSaga),
    ];

I think you also had duplicated root saga call, I also done that mistake on my rootsaga

[vimal1824]

I am calling saga once but api calls are being made twice

[subhadeepquantiantech]

here is the solution: import {shallowEqual} from 'react-redux';

pass it as a second parameter in your useselector

[vimal1824]

Solved! The issue was with enhancers in createStore method, I believe it was executing saga middleware twice

[neurosnap]

Closing issue since this appears to be a context-specific issue. If anyone has an issue please open a new issue and I can help triage.