Description
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();
}