Redux Saga performs yield multiple times - react-redux

Question

I'm fighting with strange behaviour of my saga.
The story is simple. User clicks the button and dispatch 'generateUserPassword' action.
My saga takes this action and should call password generation only once, but does it multiple times. I do not have backend for that, so i get 404 http response and catch an exception in saga. Then, generateUserPasswordFailed action is dispatched and handled in handleGenerationFailed()
function* generateUserPassword(action: GenerateUserPassword): unknown {
const request: PasswordGenerateRequest = { email: action.email }
try {
yield callPasswordGenerate(request)
yield put(userPasswordGenerated())
} catch (e) {
yield put(generateUserPasswordFailed())
}
}
function* handlePasswordGeneration(): unknown {
yield put(showInfoMessage('Hasło zostało wysłane do Ciebie smsem'))
}
function* handleGenerationFailed(): unknown {
yield put(showWarningAlert('Coś poszło nie tak. Spróbuj ponownie'))
}
export function* userPasswordSaga(): IterableIterator<ForkEffect> {
yield takeLatest(GENERATE_USER_PASSWORD, generateUserPassword)
yield takeLatest(GENERATE_USER_PASSWORD_FAILED, handleGenerationFailed)
yield takeLatest(USER_PASSWORD_GENERATED, handlePasswordGeneration)
}
In result, in console i see this:
As you see, DISPATCH_ALERT is called multiple times.
And 783 requests have been sent:
But why 783?
These are my actions:
export type GenerateUserPassword = {
type: typeof GENERATE_USER_PASSWORD
email: string
}
export type UserPasswordGenerated = {
type: typeof USER_PASSWORD_GENERATED
}
export type GenerateUserPasswordFailed = {
type: typeof GENERATE_USER_PASSWORD_FAILED
}
export const showWarningAlert = (alertKey: string, prefixKey?: string): DispatchAlert => ({
type: DISPATCH_ALERT,
alert: {
type: 'WARNING',
key: alertKey,
prefixKey
}
})
And here is http call:
export type PasswordGenerateRequest = {
email: string
}
export const callPasswordGenerate = async (request: PasswordGenerateRequest): Promise<unknown> => {
const response = await axios.post(`/passCreate`, request)
return response.data
}
It gets weirder, when I put console.log in my saga. It is called 782 times and i don't see any further actions dispatched.
function* generateUserPassword(action: GenerateUserPassword): unknown {
const request: PasswordGenerateRequest = { email: action.email }
console.log('generate user password called')
try {
yield callPasswordGenerate(request)
yield put(userPasswordGenerated())
} catch (e) {
yield put(generateUserPasswordFailed())
}
}
When i put console.log in catch clause:
function* generateUserPassword(action: GenerateUserPassword): unknown {
const request: PasswordGenerateRequest = { email: action.email }
try {
yield callPasswordGenerate(request)
yield put(userPasswordGenerated())
} catch (e) {
console.log('exception')
yield put(generateUserPasswordFailed())
}
}
It's logged only once:
Please help me to understand this.
Thanks in advance!