The Zustand store does not reflect changes when the URL is updated

Question

The Zustand store does not reflect changes when the URL is updated

I have a Zustand store connected to the URL. See the code snippet provided below.

import { create } from "zustand";
import { persist, StateStorage, createJSONStorage } from "zustand/middleware";

const pathStorage: StateStorage = {
  getItem: (key): string => {
    const pathname = window.location.pathname;
    const p = pathname.split("/").filter(Boolean)[3];
    return p;
  },
  setItem: (key, newValue): void => {
    const slug = JSON.parse(newValue).state.tab;
    const oldSlug = window.location.pathname.split("/").filter(Boolean)[3];
    const newUrl = `/fsd/sdet/class-structure/${slug}`;
    if (oldSlug) {
      window.history.replaceState(null, "", newUrl);
    } else {
      window.history.pushState(null, "", newUrl);
    }
  },
  removeItem: (key): void => {
  },
};

export const useStore = create<{
  tab: string;
  setTab: (tab: string) => void;
}>()(
  persist(
    (set, get) => ({
      tab: "",
      setTab: (tab: string) => set({ tab }),
    }),
    {
      name: "tab-storage",
      storage: createJSONStorage(() => pathStorage),
    },
  ),
);

Although the browser back/forward buttons change the URL, the store does not update automatically.

Is there anyone who can assist with this issue? I am using Next.js 14, React 18, and Zustand 4.5.

javascript reactjs dom next.js zustand

Answer 1

Answer №1

Your Zustand store now has the ability to persist its state to the URL using a custom StateStorage implementation called pathStorage, thanks to the persist middleware. This setup ensures that the URL is updated whenever the state changes and can retrieve the state from the URL when the page is reloaded.
However, there's an issue when using the browser's back/forward buttons as the URL changes, but the store doesn't update automatically. To solve this, you need to listen for URL changes and update the store accordingly. You can achieve this by adding an event listener for the popstate event, which triggers when the user navigates through their history using back or forward buttons. Here's an example of how to do this:

... your imports...

const pathStorage: StateStorage = {
  getItem: (key): string => {
    const pathname = window.location.pathname
    const p = pathname.split("/").filter(Boolean)[3]
    return p
  },
  setItem: (key, newValue): void => {
    const slug = JSON.parse(newValue).state.tab
    const oldSlug = window.location.pathname.split("/").filter(Boolean)[3]
    const newUrl = `/fsd/sdet/class-structure/${slug}`
    if (oldSlug) {
      window.history.replaceState(null, "", newUrl)
    } else {
      window.history.pushState(null, "", newUrl)
    }
  },
  removeItem: (key): void => {
  },
}

export const useStore = create<{
  tab: string
  setTab: (tab: string) => void
}>()(
  persist(
    (set, get) => ({
      tab: "",
      setTab: (tab: string) => {
        set({ tab })
        pathStorage.setItem("tab", JSON.stringify({ state: { tab } }))
      },
    }),
    {
      name: "tab-storage",
      storage: createJSONStorage(() => pathStorage),
    },
  ),
)

// Listen for popstate events to update the store when the URL changes
window.addEventListener("popstate", () => {
  const tab = pathStorage.getItem("tab")
  if (tab) {
    useStore.getState().setTab(tab)
  }
})

Adding this event listener ensures that the store updates correctly when the user navigates with the browser's back/forward buttons, as the popstate event will be triggered each time the URL changes.

Answer 2

Your Zustand store now has the ability to persist its state to the URL using a custom StateStorage implementation called pathStorage, thanks to the persist middleware. This setup ensures that the URL is updated whenever the state changes and can retrieve the state from the URL when the page is reloaded.
However, there's an issue when using the browser's back/forward buttons as the URL changes, but the store doesn't update automatically. To solve this, you need to listen for URL changes and update the store accordingly. You can achieve this by adding an event listener for the popstate event, which triggers when the user navigates through their history using back or forward buttons. Here's an example of how to do this:

... your imports...

const pathStorage: StateStorage = {
  getItem: (key): string => {
    const pathname = window.location.pathname
    const p = pathname.split("/").filter(Boolean)[3]
    return p
  },
  setItem: (key, newValue): void => {
    const slug = JSON.parse(newValue).state.tab
    const oldSlug = window.location.pathname.split("/").filter(Boolean)[3]
    const newUrl = `/fsd/sdet/class-structure/${slug}`
    if (oldSlug) {
      window.history.replaceState(null, "", newUrl)
    } else {
      window.history.pushState(null, "", newUrl)
    }
  },
  removeItem: (key): void => {
  },
}

export const useStore = create<{
  tab: string
  setTab: (tab: string) => void
}>()(
  persist(
    (set, get) => ({
      tab: "",
      setTab: (tab: string) => {
        set({ tab })
        pathStorage.setItem("tab", JSON.stringify({ state: { tab } }))
      },
    }),
    {
      name: "tab-storage",
      storage: createJSONStorage(() => pathStorage),
    },
  ),
)

// Listen for popstate events to update the store when the URL changes
window.addEventListener("popstate", () => {
  const tab = pathStorage.getItem("tab")
  if (tab) {
    useStore.getState().setTab(tab)
  }
})

Adding this event listener ensures that the store updates correctly when the user navigates with the browser's back/forward buttons, as the popstate event will be triggered each time the URL changes.

The Zustand store does not reflect changes when the URL is updated

Answer №1

Similar questions

Can you explain the contrast between afterInteractive and lazyOnload techniques?

Why won't both routes for Sequelize model querying work simultaneously?

Utilize Axios in Vue.js to fetch and process data from a REST API endpoint in C#

Creating an overlay with CSS hover on a separate element and the ::before pseudo class

Halfway opening the dialog drawer

Showing JSX/HTML content depending on the props received

What is the best method for playing raw audio wav files directly in a web browser?

Utilize React-markdown to interpret subscript text in markdown format

Issues have been encountered with Angular 5 when trying to make required form fields work properly

"Enhance Your Website with qTip2 Feature to Load Multiple AJAX Sites Simult

Move the cursor within the text area upon clicking the button

Unable to establish an HTTP-Only cookie between a Java backend and a NextJS application

unable to decipher a JSON file obtained from Instagram

Altering information with the use of history.pushState throughout time

The deployment of a Reactjs application on Heroku was unsuccessful and crashed unexpectedly

Validating checkboxes using HTML5

What are some methods for testing enzyme, react-virtualized, and material-ui components?

Creating Layouts with Bootstrap 3

Encountered a problem while trying to add npm package to a Next.JS project

I'm struggling to figure out how to properly utilize NextJs useRouter function