bug: un-expected behavior / run time error due to redux async calls

[Teja2045]

async calls like dispatch(getBalances(inputs)), dispatch(getAuthzBalances(inputs)), dispatch(getDelegations(inputs)) are being executed even when they should stopped after some certain actions. example: (when ExitAuthzMode action is done, the pending dispatch(getAuthzBalances(inputs) should be stopped, when logout action is done, pending dispatch(getBalances(inputs)) should be stopped)

While this won't cause major issues, this will lead lot of unexpected behavior in almost all slices. Eg: state.balanceLoading becoming negative in bank slice, etc.... also some runtime errors inside async thunks' extra builders' .fullfilled state or .rejected state

solution - 1: stopping the execution of extra builders .fullfilled state and .rejected state

builder
      .addCase(getAuthzUnbonding.pending, (state, action) => {
        const { chainID } = action.meta.arg;
        if (!state.authz.chains[chainID])
          state.authz.chains[chainID] = cloneDeep(state.defaultState);
        state.authz.chains[chainID].unbonding.status = TxStatus.PENDING;
        state.authz.chains[chainID].unbonding.errMsg = '';
        console.log('here1...');
      })

      .addCase(getAuthzUnbonding.fulfilled, (state, action) => {
        const { chainID } = action.meta.arg;
        
        // below line to fix
       if(state.authz.chains[chainID]?.unbonding.status !== TxStatus.PENDING) return;

        const unbonding_responses = action.payload.data.unbonding_responses;
        let totalUnbonded = 0.0;
        if (unbonding_responses?.length) {
          unbonding_responses.forEach((unbondingEntries) => {

Solution - 2:

cancelling the promise itself where it was dispatched

const promise = dispatch(getBalances(inputs))

 // call this where it is needed
  const cancelPromise = () => {
  promise.abort();
}