ترتیب اجرای middleware ها

کد زیر رو در نظر بگیرید:

console.log(1);
foo();
console.log(2);

در اینجا foo یک تابع هست که حالا فرقی نمیکنه که داخلش چه لاجیکی داره! منطقا نباید مشکلی داشته باشی که بعد از اجرای تابع foo عملیات لاگ عدد ۲ انجام بشه!

حالا کدی زیر رو در نظر بگیر:

const print1 = storeApi => next => action => {
    console.log('Action: ', action);
    next(action)
    console.log('new state: ', storeApi.getState())
}

این هم تقریبا مشابه همون حالت! یک تابعی داریم به اسم next که کاری نداریم چه کدی داخل نوشته شده، بعد از اینکه اجرای کدهای اون تموم بشه میرسیم به خط بعدی که داره new state رو لاگ میکنه

سلام

اگر امکانش هست دقیقه ای که در این مورد صحبت میشه یا کدش رو قرار بدید که بتونم در موردش توضیح بدم چون کلا اینجا داره لاگ انجام میشه و نمیدونم منظورتون کدوم یکی هست

تو این قسمت کد که شما تو دو دقیقه آخر ویدیو نوشتید اول لاگ ها print1 ,print2 ,print3 اجرا شد به ترتیب و بعد اومد اخرین لاگ بعد از next توی print1 اجرا شد 

من متوجه نمیشم چرا بعد از print3 دوباره برمیگرده و این لاگ رو اجرا میکنه

اگر next رو return کنیم که مشکل حله ولی می خوام بدونم وقتی return نمیکنیم چرا این اتفاق می افته؟

ممنون

const print1 = storeApi => next => action => {
    console.log('Action: ', action);
    next(action)
    console.log('new state: ', storeApi.getState())
}

function print1(storeApi) {
    return function wrapDispatch(next) {
        return function handlAction(action) {
            console.log(1);

            next(action)
            console.log('new State :', storeApi.getState());
        }
    }
}

function print2(storeApi) {
    return function wrapDispatch(next) {
        return function handlAction2222(action) {
            console.log(2);

            next(action)
        }
    }
}

function print3(storeApi) {
    return function wrapDispatch(next) {
        return function handlAction(action) {
            console.log(3);

            next(action)
        }
    }
}


const store = createStore(rootReducer, preloadedState, applyMiddleware(print1, print2, print3))

export default store