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:
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>
