title: setState in redux action promise
body: <p>I have an action in redux that call an api and return a promise like that:</p>
  <pre><code>export const otherServices = ({type, payload}: Action) =&gt; {
    return (dispatch: ReduxDispatch, getState: ReduxGetState) =&gt; {
      // 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) =&gt; {
        dispatch(toggleButtonSpinner(true));
        axios({
          method: 'post',
          url: url,
          baseURL: API_V2,
          data: data,
        })
        .then(res =&gt; {
          resolve(true);
        })
        .catch(e =&gt; {
          reject(false);
        })
        .finally(() =&gt; {});
      })
    }
  }
  </code></pre>
  <p>and I have a component that call it using <code>useDispatch</code> hook.
  I call this action and in finally section of the promise, I set an state tha I create it in component using <code>useState</code> hook.</p>
  <pre><code>const [step, setStep] = useState('input');
  </code></pre>
  <p>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.</p>
  <pre><code>const onPressBuyCharge = () =&gt; {
      dispatch(
        otherServices({
          type: SimCard_Charge,
          payload: {
            phoneNumber: phoneNumber,
            amount: amount,
            ewallets: selectedServicesWalletOptions,
          },
        })
      ).then(res =&gt; {
        setStep('input');
      });
    };
  </code></pre>
  <p>but I got this error on emulator:</p>
  <p><a href="https://i.stack.imgur.com/OB0XP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OB0XP.png" alt="enter image description here" /></a></p>
  <p>and if I remove <code>setStep('input')</code> or move it outside of promise, all fine.</p>
  <p>this is my render function:</p>
  <pre><code>&lt;KeyboardAwareScrollView
          style={[commonStyles.container, {backgroundColor: colors.milk}]}
          contentContainerStyle={{alignItems: 'center'}}&gt;
          &lt;Header
            title={LANGUAGE_STRINGS.mobileCharge}
            LeftIcon={'arrow-back'}
            leftFunc={backAction}
          /&gt;
          {step === 'input' ? (
            &lt;&gt;
              &lt;WalletCredit /&gt;
              &lt;InputNumber
                onChangeText={e =&gt; onChangePhone(e)}
                defaultPhone={phoneNumber}
                onPressSimCard={onPressSimCard}
                onPressContacts={onPressSelectContacts}
              /&gt;
              &lt;Operators selectedIndex={operator.index} /&gt;
              &lt;InputCharge onAmountChange={e =&gt; setAmount(e)} /&gt;
              &lt;SpinnerButton
                onPress={onPressConfirm}
                text={LANGUAGE_STRINGS.buyCharge}
                containerStyle={styles.btn_buy}
                fontStyle={{color: colors.white}}
              /&gt;
            &lt;/&gt;
          ) : step === 'buy' ? (
            &lt;&gt;
              &lt;Text style={[commonStyles.textStyle, styles.headerMessage]}&gt;
                {LANGUAGE_STRINGS.charge} {LANGUAGE_STRINGS.yourSelection}
              &lt;/Text&gt;
              &lt;Image
                source={source}
                style={styles.operatorImg}
                resizeMode=&quot;contain&quot;
              /&gt;
              &lt;Text style={[commonStyles.textStyle, styles.phoneNumber]}&gt;
                {phoneNumber}
              &lt;/Text&gt;
              &lt;View style={styles.line} /&gt;
              &lt;Text style={[commonStyles.textStyle, styles.amount_text]}&gt;
                {priceDigitSeperator(amount)}{' '}
                &lt;Text style={{color: colors.buttonGray}}&gt;
                  ({LANGUAGE_STRINGS.cashUnit})
                &lt;/Text&gt;
              &lt;/Text&gt;
              &lt;View style={styles.line} /&gt;
              &lt;ServicesWalletOptions /&gt;
              &lt;View style={styles.row}&gt;
                &lt;SpinnerButton
                  onPress={onPressBuyCharge}
                  text={LANGUAGE_STRINGS.buyCharge}
                  containerStyle={styles.row_left}
                /&gt;
                &lt;SpinnerButton
                  onPress={onPressCloseModal}
                  containerStyle={styles.row_right}
                  text={LANGUAGE_STRINGS.cancel}
                  fontStyle={{color: colors.pink}}
                /&gt;
              &lt;/View&gt;
            &lt;/&gt;
          ) : null}
        &lt;/KeyboardAwareScrollView&gt;
  </code></pre>