reactjs - 成功消息显示两次反应JS

Question

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

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

我正在我的组件中使用 useSelector 访问这个 showEmailSuccess 并以下列方式显示成功消息

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

一切正常，但是这个通知容器被显示了两次，我已经被困在这里很长一段时间了，但不明白为什么。任何帮助都得到了帮助。

标签： reactjsreduxreact-redux

Answer 1

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