Search code examples
reactjsreduxconnected-react-router

react redux - how to reload the page instead of "push"


I have a thunk action that logout the user

inside the logout thunk action I have this: dispatch(push('/login'));

I would like to redirect the user with a "refresh" to logout in order to refresh the page and. "clean' the state

also, I would like to clean the redux store, and not its not clean

import { push } from 'connected-react-router';


export function logout() {
  return async (dispatch: any, state: State, services: Services) => {
    try {
        await services.auth.logout();
    } catch (e) {
      services.logger.error(e);
    } finally {
      dispatch({ type: AUTH_LOGOUT });
      dispatch(push('/login'));
    }
  };
}

also when click on a button from component I have

const Logout = () => {
  const dispatch = useDispatch();

  React.useEffect(() => {
    dispatch(logout());
  }, [dispatch]);

  return null;
};

Reducer

   case AUTH_LOGOUT: {
        draft.authenticated = false;
        draft.currentUser = {} ;
        return draft;
      }


Solution

  • Then you can simply do window.location.href = '/login';