消息没有被推送到 redux 商店答案

【问题标题】：Message gets not pushed into redux store消息没有被推送到 redux 商店
【发布时间】：2019-07-23 12:59:38
【问题描述】：

有没有人知道为什么当用户退出系统时没有将通知推送到 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 挂钩没有收到有关更改的通知。

【问题讨论】：

标签： reactjs react-redux react-hooks

【解决方案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;
  }
};

【讨论】：