如何防止动作创建者在while循环中出现无限循环？

Question

Trying to implement some kind of game loop, that will run until conditions are met.

However during testing I just can't solve the problem of while loop not waiting for resolve of promises, instead it just calls them over and over again causuing browser to crash.

The combatStart() is called when component is mounted

export const combatStart = () => {
    return function (dispatch, getState) {

        while (getState().mechanics.noOfEnemiesAttacked < 5) {
            let setTimeoutPromise = new Promise(resolve => {
                let success = true;
                setTimeout(function () { resolve(success) }, 3000);
            })

            setTimeoutPromise.then((resp) => {
                if(resp){
                    dispatch({
                        type: 'INCREMENT_ENEMIES_ATTACKED'
                    })
                }

            })
       }
    }
}

When i dispatch the action the "noOfEnemiesAttacked" increments, and when it reaches 5 the loop should stop. So it should last around 15 seconds.

The code works until I add the while loop, otherwise it works as expected, increments the value after 3 seconds when component is mounted.

How can I make this work?

Recursively doesnt work, it doesnt loop, just goes once:

export const combatStart = () => {
    return function (dispatch, getState) {
        let setTimeoutPromise = new Promise(resolve => {
            let success = true;
            setTimeout(function () { resolve(success) }, 2000);
        })

        setTimeoutPromise.then((resp) => {
            if (resp) {
                dispatch({
                    type: 'INCREMENT_ENEMIES_ATTACKED'
                })
            }
            if (getState().mechanics.noOfEnemiesAttacked < 5) {
                console.log(getState().mechanics.noOfEnemiesAttacked)
                combatStart();
            }
        })

    }
}

Answer 1

Wrapped it in a function, now it should work

export const combatStart = () => {
    return function (dispatch, getState) {
        function foo(){
            let setTimeoutPromise = new Promise(resolve => {
                let success = true;
                setTimeout(function () { resolve(success) }, 2000);
            })

            setTimeoutPromise.then((resp) => {
                if (resp) {
                    dispatch({
                        type: 'INCREMENT_ENEMIES_ATTACKED'
                    })
                }
                if (getState().mechanics.noOfEnemiesAttacked < 5) {
                    console.log(getState().mechanics.noOfEnemiesAttacked)
                    combatStart();
                    foo();
                }
            })
        }

        foo();
    }
}