setState in redux action promise

Viewed 90

I have an action in redux that call an api and return a promise like that:

export const otherServices = ({type, payload}: Action) => {
  return (dispatch: ReduxDispatch, getState: ReduxGetState) => {
    // dispatch(displayToastModal('error'));
    let data: any = null;
    let url: string = '';
    switch (type) {
      case SimCard_Charge: {
        data = {
          amount: payload.amount,
          cellphone: payload.phoneNumber,
          ewallets: JSON.stringify(payload.ewallets),
          charge_type: 'direct',
        };
        url = 'charge/simcard/direct';
        break;
      }
      case SimCard_Package: {
        // somthine like SimCard_Charge case
        ...
      }
      case TAXI_PAYMENT: {
        // somthine like SimCard_Charge case
        ...
      }
    }
    return new Promise((resolve, reject) => {
      dispatch(toggleButtonSpinner(true));
      axios({
        method: 'post',
        url: url,
        baseURL: API_V2,
        data: data,
      })
      .then(res => {
        resolve(true);
      })
      .catch(e => {
        reject(false);
      })
      .finally(() => {});
    })
  }
}

and I have a component that call it using useDispatch hook. I call this action and in finally section of the promise, I set an state tha I create it in component using useState hook.

const [step, setStep] = useState('input');

this state has changed to 'buy' in first step and in second step I call this action and I want to clear all state and return to first step.

const onPressBuyCharge = () => {
    dispatch(
      otherServices({
        type: SimCard_Charge,
        payload: {
          phoneNumber: phoneNumber,
          amount: amount,
          ewallets: selectedServicesWalletOptions,
        },
      })
    ).then(res => {
      setStep('input');
    });
  };

but I got this error on emulator:

enter image description here

and if I remove setStep('input') or move it outside of promise, all fine.

this is my render function:

<KeyboardAwareScrollView
        style={[commonStyles.container, {backgroundColor: colors.milk}]}
        contentContainerStyle={{alignItems: 'center'}}>
        <Header
          title={LANGUAGE_STRINGS.mobileCharge}
          LeftIcon={'arrow-back'}
          leftFunc={backAction}
        />
        {step === 'input' ? (
          <>
            <WalletCredit />
            <InputNumber
              onChangeText={e => onChangePhone(e)}
              defaultPhone={phoneNumber}
              onPressSimCard={onPressSimCard}
              onPressContacts={onPressSelectContacts}
            />
            <Operators selectedIndex={operator.index} />
            <InputCharge onAmountChange={e => setAmount(e)} />
            <SpinnerButton
              onPress={onPressConfirm}
              text={LANGUAGE_STRINGS.buyCharge}
              containerStyle={styles.btn_buy}
              fontStyle={{color: colors.white}}
            />
          </>
        ) : step === 'buy' ? (
          <>
            <Text style={[commonStyles.textStyle, styles.headerMessage]}>
              {LANGUAGE_STRINGS.charge} {LANGUAGE_STRINGS.yourSelection}
            </Text>
            <Image
              source={source}
              style={styles.operatorImg}
              resizeMode="contain"
            />
            <Text style={[commonStyles.textStyle, styles.phoneNumber]}>
              {phoneNumber}
            </Text>
            <View style={styles.line} />
            <Text style={[commonStyles.textStyle, styles.amount_text]}>
              {priceDigitSeperator(amount)}{' '}
              <Text style={{color: colors.buttonGray}}>
                ({LANGUAGE_STRINGS.cashUnit})
              </Text>
            </Text>
            <View style={styles.line} />
            <ServicesWalletOptions />
            <View style={styles.row}>
              <SpinnerButton
                onPress={onPressBuyCharge}
                text={LANGUAGE_STRINGS.buyCharge}
                containerStyle={styles.row_left}
              />
              <SpinnerButton
                onPress={onPressCloseModal}
                containerStyle={styles.row_right}
                text={LANGUAGE_STRINGS.cancel}
                fontStyle={{color: colors.pink}}
              />
            </View>
          </>
        ) : null}
      </KeyboardAwareScrollView>
0 Answers
Related