Redux Saga API is being called twice yet the action is dispatched only once

Viewed 49

I have this sign up button, which takes the form data as payload and dispatch the API, the strange thing is the action is only dispatched once but in saga the API is called twice, which in turns sends 2 sign up requests and generates error. Following is code which is responsible for dispatching action

export function mapDispatchToProps(dispatch) {
  return {
    onSignIn: (data) => {
      dispatch(signInUser(data));
    },
    makeCreateUser: (data, countryName, signupFields) => {
      dispatch(createUser(data, countryName, signupFields));
    }
  };
}

Following is the action

export function createUser(data, countryName, signupFields) {  
  return {
    type: CREATE_USER,
    data,
    countryName,
    signupFields,
  };
}

Following is reducer

case CREATE_USER:
  return state
    .set('userSuccess', false)
    .set('userError', false);
case CREATE_USER_SUCCESS:
  return state
    .set('userSuccess', action.response);
case CREATE_USER_ERROR:
  return state
    .set('userError', action.error);

Following code calls the API in saga

// CREATE_USER
export function* createUser(payload) {
  const requestURL = `users/signup${window.location.search}`;

  try {
      // Call our request helper (see 'utils/request')
    const response = yield call(request, requestURL, { headers: { 'Content-Type': 'application/json' }, method: 'POST', body: JSON.stringify(payload.data) });
    yield put(signInUserSuccess(response, payload.data.provider, payload.signupFields, true));
  } catch (err) {
    yield put(createUserError(err, payload));
  }
}
export default function* AccountSagas() {
     yield takeLatest(CREATE_USER, createUser);
}

Following is the definition for signInUserSuccess, sendSignUpFormEvent is for analytics

export function signInUserSuccess(response, provider = null, 

signupFields = null, isNewUser = false) {
  segmentIdentity(response.user);
  storage.setItem(USER_KEY, response.user);
  eraseCookie('xiangqi.jwt_token'); // just making sure to remove previous cookie;
  setCookie('xiangqi.jwt_token', response.access_token, 10);
  if (isNewUser) {
    sendSignUpFormEvent(response.user, {
      provider,
      errorFields: null,
      errorType: null,
      isSuccessful: true,
      signupFields,
    });
  } else {
    sendSignInFormEvent(response.user, provider);
  }
  return {
    type: SIGN_IN_USER_SUCCESS,
    response,
  };
}

Please have a look at createUser in codebase, its only being used once as generator

enter image description here

Also I added logs on the whole request journey and as you can see in the picture the API is being called twice from saga.js

enter image description here

0 Answers
Related