Application crash when pass an action method to store.dispatch in the middleware

[barbhackk]

Hello everyone,

I am developing an application with React Native and I want to set up a middleware that refreshes the token if it is expired (jwt refresh token). I am also using thunk for asynchronous functions.

If token is expired, I push the current action in array and I call the refresh token method in dispatcher. When the refresh token is renew, I call all actions in array.

My problem is that when the token expired, I use store.dispatch (userActions.refreshToken(state.auth.user.refresh_token)). Unfortunately when I launch the app I got no error just a white screen.

If I use next (userActions.refreshToken (state.auth.user.refresh_token)) instead it works. Why not with store.dispatch

package.json

    ...
    "react-redux": "^7.2.6",
    "redux": "^4.1.2",
    "redux-persist": "^6.0.0",
    "redux-thunk": "^2.4.1"
    ...

AuthMiddleware

const authMiddleware = store => next => action => {
    const state = store.getState()
    let isTokenExpired = false

    if (action.type === 'REFRESH_TOKEN_REQUEST') {
        return next(action)
    }

    if (action.type === 'REFRESH_TOKEN_SUCCESS') {
        next(action)

        if (buffer.length > 0) {
            console.log("buffer : " + buffer)
            buffer.forEach(action => store.dispatch(action))
            buffer = []
        }
    }

    if (typeof action === 'function') {
        // Si il y a pas de token user c'est qu'on est en cours de connexion.
        if (!state.auth.user.token) {
            return next(action)
        }

        isTokenExpired = isExpired(state.auth.user.token)

        if(isTokenExpired){
           // MY PROBLEM IS HERE ==>
            store.dispatch(userActions.refreshToken(state.auth.user.refresh_token))
            buffer.push(action)
        }
    }

    return next(action)

Refresh token méthode

function refreshToken(refreshToken) {
    return async dispatch => {
        
        dispatch(request())

        authApi.refreshToken(refreshToken).then(
            (res) => {
                const user = res
                dispatch(success(user))
            },
            (err) => {
                showMessage({
                    message: err.message,
                    type: "danger",
                    floating: true,
                    duration: 3500
                });
                dispatch(failure())
            }
        )
    }

    function request() { return { type: 'REFRESH_TOKEN_REQUEST' } }
    function success(user) { return { type: 'REFRESH_TOKEN_SUCCESS', user } }
    function failure() { return { type: 'REFRESH_TOKEN_FAILURE' } }
}

configureStore

import { createStore, combineReducers, applyMiddleware } from 'redux'
import { persistStore, persistReducer } from 'redux-persist'
import AsyncStorage from '@react-native-async-storage/async-storage'
import thunk from 'redux-thunk'
import app from './reducers/appReducer'
import auth from './reducers/authReducer'
import authMiddleware from './middleware/authMiddleware'

const persistConfig = {
    key: 'root',
    storage: AsyncStorage
}

const reducers = combineReducers({
    app,
    auth
})

const persistedReducer = persistReducer(persistConfig, reducers)
const store = createStore(persistedReducer, applyMiddleware(authMiddleware, thunk))
const persistor = persistStore(store)

export { store, persistor }

Thanks in advance for your great help