Success message being shown twice react JS - reactjs

Question

I am using redux to maintain my state in my react app, in my functional component i am dispatching some action in following way,
const handleClickOpen = () => {
console.log('in handle');
let data = {
reports_interval : currentSetting
};
dispatch(updateEmailSettingsAction({data: data, id: settings.id}))
};
in actions i have updateEmailSettingsAction and updateEmailSettingsActionSuccess showEmailSuccessAction which looks like following.
export const updateEmailSettingsAction = (settings) => {
console.log('in actrions');
return {
type: UPDATE_EMAIL_SETTINGS,
payload: settings
};
};
export const updateEmailSettingsActionSuccess = (settings) => {
console.log('success dispatched');
return {
type: UPDATE_EMAIL_SETTINGS_SUCCESS,
payload: settings
};
};
export const showEmailSuccessAction = (message) => {
return {
type: SHOW_EMAIL_SETTINGS_SUCCESS,
payload: message
}
};
Following are my sagas
const updateEmailSettings_request = async (data, id) =>
await updateEmailSettingsService(data, id)
.then(settings => settings)
.catch(error => error);
function* updateEmailSettingsFunction(payload) {
console.log('in func');
const {data, id} = payload.payload;
try {
const req = yield call(updateEmailSettings_request, data, id);
if (req.status === 200) {
console.log('in 200');
yield put(updateEmailSettingsActionSuccess(req.data));
yield put(showEmailSuccessAction('Success'));
}
else {
if (!req.data) {
yield put(showEmailSettingsAlert(req.message))
}else {
for (let key in req.data) {
yield put(showEmailSettingsAlert(req.data[key]));
}
}
}
} catch (error) {
yield put(showEmailSettingsAlert(error));
}
}
export function* updateEmailSettings() {
console.log('in final');
yield takeLatest(UPDATE_EMAIL_SETTINGS, updateEmailSettingsFunction)
}
and in following are my reducers.
const INIT_STATE = {
alertMessage: '',
settings: null,
successMessage: '',
showEmailSuccess: false,
};
export default (state = INIT_STATE, action) => {
switch (action.type) {
case UPDATE_EMAIL_SETTINGS_SUCCESS: {
return {
...state,
loader: false,
settings: action.payload,
}
}
case SHOW_EMAIL_SETTINGS_SUCCESS: {
console.log('in here reducer');
return {
...state,
loader: false,
showEmailSuccess: true,
successMessage: action.payload
}
}
}
i am accessing this showEmailSuccess in my component usinf useSelector in and showing success message in following way
{(showEmailSuccess && NotificationManager.success(successMessage) && show)}
<NotificationContainer/>
everything is working fine but this notification container is being shown twice, i have been stuck in this for quite sometime now but can't understand why.any help is appriciated.

Answer 1

case UPDATE_EMAIL_SETTINGS_SUCCESS: {
return {
...state,
loader: false,
showEmailSuccess: false, // Add this line
settings: action.payload,
}
}