useEffect not firing on chained dispatch (chained yield put from redux-saga) - reactjs

Question

Libraries used: redux and redux-saga.
On one of my components I have the useEffect hook that has the dependency set to the status of an API request. That useEffect is then triggering a toast notification based on whether the API request is successful or failed.
But, this useEffect is not firing on each yield put called by the redux-saga defined below.
My intention is the following:
Fire the useEffect in the component after the yield put requestSuccessful(...) or yield put requestFailed(...)
After that, fire the useEffect once again after the yield put initResponseFlags(...)
What's happening currently is that my useEffect is not called at all. I'm assuming it's probably because the yield(s) inside the saga change the redux state so fast (from false to true and then false again) that useEffect is not being able to catch the change.
Places.js (component)
const { places, message, waiting, success, error } = useSelector(state => ({
places: state.Places.data.places,
message: state.Places.requestStatus.message,
waiting: state.Places.requestStatus.waiting,
success: state.Places.requestStatus.success,
error: state.Places.requestStatus.error,
}));
...
useEffect(() => {
console.log("useEffect called");
if (success || error) {
// ... toast message ...
console.log("Firing");
}
}, [dispatch, success, error, message, waiting]);
My project uses the redux-saga library and it contains a generic saga for each API request being made in the app.
saga.js
function* requestStart(args, params) {
if (!params || !params.payload || !params.payload.action)
throw Object.assign(
new Error(`Get action params and payload have not been defined!`),
{ code: 400 }
);
let action = params.payload.action;
let actionPayload = params.payload.actionPayload;
let actions = params.payload.actions;
try {
if (process.env.REACT_APP_API_URL) {
if (actions?.beforeStart) {
yield put(putAction(actions?.beforeStart));
}
const { response, error } = yield call(action, actionPayload);
if (response !== undefined) {
yield put(requestSuccessful(args.namespace, response));
if (actions?.onSuccess) {
yield put(putAction(actions?.onSuccess, response));
}
} else {
yield put(requestFailed(args.namespace, error));
if (actions?.onFailure) {
yield put(putAction(actions?.onFailure, error));
}
}
}
} catch (error) {
yield put(requestFailed(args.namespace, error));
if (args.actions?.onFailure) {
yield put(putAction(params.actions?.onFailure, error));
}
} finally {
yield put(initResponseFlags(args.namespace));
}
}
actions.js
export const initResponseFlags = (namespace) => {
return {
type: `${namespace}/${INIT_RESPONSE_FLAGS}`,
};
};
export const requestStart = (namespace, payload) => {
return {
type: `${namespace}/${REQUEST_START}`,
payload: payload,
};
};
export const requestSuccessful = (namespace, payload) => {
return {
type: `${namespace}/${REQUEST_SUCCESSFUL}`,
payload: payload
};
};
export const requestFailed = (namespace, error) => {
return {
type: `${namespace}/${REQUEST_FAILED}`,
payload: error
};
};
reducer.js
import {
INIT_RESPONSE_FLAGS,
REQUEST_START,
REQUEST_SUCCESSFUL,
REQUEST_FAILED,
} from "./actionTypes";
const initialState = {
message: null,
waiting: false,
success: false,
error: false,
};
const RequestStatus = (namespace) => (state = initialState, action) => {
switch (action.type) {
case `${namespace}/${INIT_RESPONSE_FLAGS}`:
state = {
...state,
message: null,
waiting: false,
success: false,
error: false,
};
break;
case `${namespace}/${REQUEST_START}`:
state = {
...state,
waiting: true,
};
break;
case `${namespace}/${REQUEST_SUCCESSFUL}`:
state = {
...state,
waiting: false,
success: true,
error: false,
};
break;
case `${namespace}/${REQUEST_FAILED}`:
state = {
...state,
waiting: false,
message: action.payload,
success: false,
error: true
};
break;
default: break;
}
return state;
};
export default RequestStatus;
EDIT (12.10.2022. 11:08)
I've just inserted a yield delay(1); of 1ms before my yield put(initResponseFlags(...)); and it works now.
Alas, if there's some other solution (cause this seems like it's botched) - any help would be appreciated!
saga.js
function* requestStart(args, params) {
if (!params || !params.payload || !params.payload.action)
throw Object.assign(
new Error(`Get action params and payload have not been defined!`),
{ code: 400 }
);
let action = params.payload.action;
let actionPayload = params.payload.actionPayload;
let actions = params.payload.actions;
try {
if (process.env.REACT_APP_API_URL) {
if (actions?.beforeStart) {
yield put(putAction(actions?.beforeStart));
}
const { response, error } = yield call(action, actionPayload);
if (response !== undefined) {
console.log('kitica');
yield put(requestSuccessful(args.namespace, response));
if (actions?.onSuccess) {
yield put(putAction(actions?.onSuccess, response));
}
} else {
yield put(requestFailed(args.namespace, error));
if (actions?.onFailure) {
yield put(putAction(actions?.onFailure, error));
}
}
}
} catch (error) {
yield put(requestFailed(args.namespace, error));
if (args.actions?.onFailure) {
yield put(putAction(params.actions?.onFailure, error));
}
} finally {
yield delay(1);
yield put(initResponseFlags(args.namespace));
}
}