Async action triggered even if middleware doesn't call next(action)

[flefloch-payps]

Hello,
I'm not sure I'm posting in the right section so please let me know if I need to edit my message somewhere else.

I'm moving a reactJS app from redux to redux toolkit.
I have a middleware which is checking my accessToken value before actions making API calls, refresh the token then relaunch the actions.
I'm struggling to make it work since I discovered that my actions are triggered even if I don't explicitly call next(action).

Here is my store

import { configureStore } from '@reduxjs/toolkit';
import {combineReducers} from 'redux';
import messageReducer from 'features/message/messageSlice';
import authentificationReducer from 'features/authentification/authentificationSlice';
import retailerRegistrationReducer from 'features/retailerRegistration/retailerRegistrationSlice';

import checkErrorMiddleware from 'app/middlewares/checkErrorMiddleware';
import refreshTokenMiddleware from 'app/middlewares/refreshTokenMiddleware';

import {
  persistReducer,
  FLUSH,
  REHYDRATE,
  PAUSE,
  PERSIST,
  PURGE,
  REGISTER,
} from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'payps-form',
  version: 1,
  storage,
};

const rootReducer = combineReducers({
  message: messageReducer,
  authentification: authentificationReducer,
  retailerRegistration: retailerRegistrationReducer
});

const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) => 
              getDefaultMiddleware({
                serializableCheck: {
                  ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
                }
              }).concat(refreshTokenMiddleware).concat(checkErrorMiddleware)
});

Here is one slice I created

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
import axios from 'axios';

const initialState = {
    loading: false,
    businessId : null,
    businessName: ""
}

export const addBusinessId = createAsyncThunk(
    'retailerRegistration/addBusinessId',
    async (businessData) => {
      return businessData;
    }
);

export const registerRetailer = createAsyncThunk(
    'retailerRegistration/register',
    async (retailerData, { getState, rejectWithValue }) => {
        const state = getState();
        const config = {
            headers: {'Authorization': "Bearer " + state.authentification.accessToken.access_token}
          };
      try{
        const apiResponse = await axios.post(process.env.REACT_APP_API+'/external/retailers/createWithUser', retailerData, config);
        if(apiResponse.data.valide !== 1){
          return rejectWithValue(apiResponse.data)
        }
        return apiResponse.data;
      }catch(error){
        return rejectWithValue(error.response.data)
      }
    }
);

export const retailerRegistrationSlice = createSlice({
    name: 'retailerRegistration',
    initialState,
    reducers: {

    },
    extraReducers: (builder) => {
        builder
            .addCase(addBusinessId.fulfilled, (state, action) => {
                state.loading = false;
                state.businessId = action.payload.businessId;
                state.businessName= action.payload.businessName;
            })
            .addCase(registerRetailer.pending, (state) => {
                state.loading = 'loading';
              })
            .addCase(registerRetailer.fulfilled, (state, action) => {
                state.loading = null;
                state.registered = true;
              })
            .addCase(registerRetailer.rejected, (state) => {
                state.loading = null;
              })
            ;
      },
  })

export default retailerRegistrationSlice.reducer;

And finally my super basic Middleware just to make my tests:

const refreshTokenMiddleware = store => next => action => {
    // If type doesn't need token we can just continue to next action
    if(action.type.includes("persist/") || action.type.includes("authentification/") || action.type.includes("message/")){
        return next(action);
    }
}
  export default refreshTokenMiddleware;

Now if I dispatch the action registerRetailer from the retailerRegistrationSlice, even if in the middleware it won't call next(action) my action is still triggered (and my API call is made).
Does it has something to do with createAsyncThunk being called before my Middleware, if so what could I do to prevent async action to be triggered?
Or am I missing something here?

Thank you for putting me on the right direction.

[markerikson]

I'm not sure what you mean by "my action is still triggered and the API call is made". Can you clarify?

Note that thunks are completely different than actions. An action is a plain object with a type field. A thunk is a function:

https://redux.js.org/usage/writing-logic-thunks

So yes, if you dispatch a thunk, it will execute, and this middleware won't do anything to stop it.

[flefloch-payps]

I just saw you updated your first answer after I posted mine :)

I really think that my problem lies here, I think I don't understand completely what thunks are.
So if I still use createAsyncThunk may I still prevent it to execute on some conditions?
Or should I need to avoid using createAsyncThunk for actions that could be stopped in my middleware?

Edit: Maybe there is something here I should try: https://redux-toolkit.js.org/api/createAsyncThunk#canceling-before-execution

[markerikson]

createAsyncThunk has a condition option you can define that will let it bail out before dispatching the actions and making the request, yeah.

[flefloch-payps]

Thanks for confirming.
Just one more question: since my purpose is to prevent action to be executed in some case (when my accessToken is expired) I will need to add that extra condition to every createAsyncThunk call?
There is no default behavior that can be defined?

[markerikson]

It really depends on what you're actually trying to accomplish. If you're trying to prevent actions from going through the pipeline, the middleware can do that. If you're trying to prevent requests from being made, then yes, you'd need to add that condition to the thunk definitions.

[flefloch-payps]

You're right, I need to prevent requests from being made so i'll have a look at that condition in the thunk definition.
Thank you for pointing me in the right direction.