消息没有被推送到 redux store

Question

有谁知道为什么当用户注销系统时没有将通知推送到 redux 存储中？

import { useDispatch, useSelector } from "react-redux";

const loginStatus = useSelector(state => state.user.status);
const previousValue = usePrevious(loginStatus);

useEffect(() => {
  if (
      previousValue === ACTION_TYPES.USER_LOGIN &&
      loginStatus === ACTION_TYPES.USER_SUCCESS
  ) {
      pushMessage(successLoginMessage, "success");
  }
  if (
      previousValue === ACTION_TYPES.USER_LOGIN &&
      loginStatus === ACTION_TYPES.USER_FAILURE
  ) {
      pushMessage(errorLoginMessage, "error");
  }

  if (
      previousValue === ACTION_TYPES.USER_LOGOUT &&
      loginStatus === ACTION_TYPES.USER_INVALID
  ) {
      pushMessage(successLogoutMessage, "success");
  }
  if (
      previousValue === ACTION_TYPES.USER_LOGOUT &&
      loginStatus === ACTION_TYPES.USER_FAILURE
  ) {
      pushMessage(errorLogoutMessage, "error");
  }
});

Redux 操作：

export const logoutUser = () => (dispatch, getState) => {
    dispatch({ type: ACTION_TYPES.USER_LOGOUT });
    return dispatch({
        type: ACTION_TYPES.USER_INVALID,
    });
};

Redux reducer（同例省略）

export default (state = DefaultState, action) => {
  switch (action.type) {
      case ACTION_TYPES.USER_LOGOUT:
          return {
              ...state,
              status: ACTION_TYPES.USER_LOGOUT,
          };
      case ACTION_TYPES.USER_INVALID:
          return DefaultState;
      case RESET_STATE:
          return DefaultState;
      default:
          return state;
  }
};

在 redux 中它成功更改为 "USER_LOGOUT" 但是我的 react-redux 挂钩没有收到有关更改的通知。

Answer 1

问题的解决方案是修改我的 redux action 和 reducer，然后更新我的 useEffect hook

useEffect(() => {
    if (
        loginStatus === ACTION_TYPES.USER_INVALID &&
        isLoggedIn === false &&
        wasLoggedIn === true
    ) {
        pushMessage(logoutSuccessfulTranslation, "success");
    }
}, [
    isLoggedIn,
    loginStatus,
    logoutSuccessfulTranslation,
    pushMessage,
    wasLoggedIn,
]);

Redux 操作

export const logoutUser = () => dispatch => {
    return dispatch({
        type: ACTION_TYPES.USER_LOGOUT,
    });
};

Redux 减速器

export default (state = DefaultState, action) => {
  switch (action.type) {
    case ACTION_TYPES.USER_LOGIN:
      return {
          ...state,
          status: ACTION_TYPES.USER_LOGIN,
      };
      case ACTION_TYPES.USER_SUCCESS:
        return {
            ...state,
            isLoggedIn: true,
            status: ACTION_TYPES.USER_SUCCESS,
            data: action.data,
            token: action.token || state.token,
        };
      case ACTION_TYPES.USER_LOGOUT:
          return {
              ...DefaultState,
              wasLoggedIn: true,
          };
      case ACTION_TYPES.USER_INVALID:
          return DefaultState;
      case RESET_STATE:
          return DefaultState;
      default:
          return state;
  }
};

消息没有被推送到 redux store

Message gets not pushed into redux store

reactjs

react-redux

react-hooks