两次显示成功消息反应JS

如何解决两次显示成功消息反应JS

我正在使用redux来维护我的react应用程序中的状态，在我的功能组件中，我以以下方式调度一些操作，

const handleClickOpen = () => {
    console.log('in handle');
    let data = {
      reports_interval : currentSetting
    };
    dispatch(updateEmailSettingsAction({data: data,id: settings.id}))
  };

在动作中，我具有updateEmailSettingsAction和updateEmailSettingsActionSuccess showEmailSuccessAction，如下所示。

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
    }
};

以下是我的传奇

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)

}

以下是我的减速器。

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,showEmailSuccess: true,successMessage: action.payload
            }
        }
}

我正在我的组件usinf useSelector中访问此showEmailSuccess并以以下方式显示成功消息

{(showEmailSuccess && NotificationManager.success(successMessage) && show)}
   <NotificationContainer/>

一切正常，但是此通知容器显示了两次，我已经在其中停留了一段时间，但是不明白为什么。需要任何帮助。

解决方法

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