Javascript 使用react js登录时显示成功消息的逻辑

我已经完成了登录部分并创建了toast bar组件。现在我只想在用户登录时显示登录成功消息

我的登录操作

export const loginUser = (email, password) => {
  return async (dispatch) => {
    try {
      dispatch(setLoginLoading());
      const response = await Api.login(email, password);
      if (response && response.data.success === "ok") {
        dispatch(loginSuccess(response.data.result));
      } else {
        dispatch(loginFailed(response.data.message));
      }
    } catch (e) {
      dispatch(loginFailed());
      console.log("login failed", e);
    }
  };
};

export const loginSuccess = (data) => {
  return {
    type: LOGIN_SUCCESS,
    payload: data,
  };
};

我的减速机

case LOGIN_SUCCESS:
      return {
        ...state,
        userInfo: action.payload,
        isLoading: false,
      };

当前，当userInfo存在时，我在组件中显示toast，所以每次安装组件时都会显示toast消息

如何使toast在用户登录时只显示一次

---

任何逻辑都会有帮助。

您可以创建一个函数（successToast）来显示toast。并在调度

loginsucess

action后立即调用它。i、 e.

if（response&&response.data.success==“ok”）{dispatch（loginsucess（response.data.result））；successToast（）；}

您能详细说明我应该在什么时候将successToast函数以及如何在组件中呈现吗？