Clear store on React navigate

[lkdm]

I have a Zustand store used to manage form alerts. I want to destruct the state upon navigating with React router.

import create from 'zustand';

interface Alert {
    title: string,
    message: string,
    variant: 'danger' | 'success'
}
interface State {
    alert: Alert | undefined,
    setAlert: (alert: Alert) => void,
}

/**
 * useAlert - A standard hook for managing alerts.
 */
const useAlert = create<State>(set => ({
    alert: undefined,
    setAlert: (alert: Alert) => set((state: State) => ({ ...state, alert: alert })),
    clearAlert: () => set((state: State) => ({ ...state, alert: undefined }))
}));

export default useAlert;

It works well, but the problem is that I only want the alert to remain in State until the user navigates to a different page; whereas Zustand keeps it around.

Am I going about this the wrong way? Other options I could use are;

1. Querystring in URL that the component grabs from.
2. React.useState() instead of Zustand.

[dai-shi]

Can you not subscribe to route changes and clear store?

[lkdm]

I am pretty inexperienced, and I was unable to make this work.

Maybe it would be more straightforward using a custom hook with useState?

/**
 * useAlert - A standard hook for managing alerts.
 */
const useAlert = (): State => {
    const [alert, setAlert] = useState<Alert | undefined>(undefined);
    const clearAlert = () =>
        setAlert(undefined);
    return {
        alert: alert,
        setAlert: setAlert,
        clearAlert: clearAlert
    };
};

[dai-shi]

Hmm, assuming you use react-router, it would be something like this:

const history = createBrowserHistory({ window });
history.listen(() => {
  useAlert.getState().clearAlert();
});

  <HistoryRouter history={history}>
   ...
  </HistoryRouter>

If useState works for your use case, it's fine too.

[lkdm]

Thanks for your help, @dai-shi. It turns out useState wasn't the way to go after all, because it is local to the component it is being used in.

My final solution is below; a custom hook backed by a Zustand store.

It allows an alert to be set on the same page, or during navigate.

import React from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import create from 'zustand';

interface Location {
    state: {
        alert: Alert
    }
    pathname: string;
}

export interface Alert {
    title: string,
    message: string,
    variant: 'danger' | 'success'
}

interface AlertState {
    alert?: Alert,
    setAlert: (alert: Alert) => void,
    clearAlert: () => void,
}

/**
 * useAlert - A standard hook for managing alerts.
 */
const useAlertState = create<AlertState>(set => ({
    alert: undefined,
    setAlert: (alert: Alert) => set((state: AlertState) => ({ ...state, alert: alert })),
    clearAlert: () => set((state: AlertState) => ({ ...state, alert: undefined }))
}));

interface AlertHook extends AlertState {
    setAlertAndNavigate: (location: string, alert: Alert) => void,
}

/**
 * # useAlert
 * Custom hook that enables pain-free alert management.
 * - Set an alert on the same page.
 * - Set an alert on another page.
 *
 * ## Steps
 * 1. Create a simple component to render your alert if one exists.
 * 2. Put that component in the application DOM tree.
 * 3. Use the useAlert hook to manage alert state.
 * @returns
 */
const useAlert = (): AlertHook => {
    const navigate = useNavigate();
    const location = useLocation() as Location;
    const { alert, setAlert, clearAlert } = useAlertState();

    // Functions
    const nav = (location: string, alert: Alert): void =>
        navigate(location, { state: { alert: alert } });

    React.useEffect(() => {
        // When a new page has been navigated to, clear the old alert.
        clearAlert();
        console.log('alert cleared');
        if (location.state?.alert) {
            console.log('there was an alert detected in useLocation');
            // If there is a new alert, set it.
            setAlert(location.state.alert);
        }
    }, [location.pathname]);

    return {
        alert: alert,
        setAlert: setAlert,
        clearAlert: clearAlert,
        setAlertAndNavigate: nav
    };
};

export default useAlert;

[dai-shi]

Sounds good.

You can try something like this too.

const useAlert = (): AlertHook => {
  // ...
  const history = useHistory();
  useEffect(() => {
    const unlisten = history.listen(() => {
      useAlertState.getState().clearAlert();
    });
    return unlisten;
  }, [history]);