destroy store zustand

[1bobofett1]

Hi guys, I started developing an app using state manager. So I have this question: I have different pages in my app. Each page has its own store with its own slides.

If I navigate between pages, my app saves all the state. Is it possible to somehow destroy the store from memory, because on page 1 I don't need to use the store from page 2. It turns out that it just takes up some memory.

I was looking for a solution to this but couldn't find it. Is there any solution to this?

[dbritto-dev]

You can dynamically create stores we do have some examples on createStore api docs

[1bobofett1]

What do you mean use Provider ? Сan you give some example or give a link to it.

I found such a solution for myself, but I don't know how much better it is and whether it will cause problems in the future

my decision:

In Store

import React from "react";
import { create, StoreApi, UseBoundStore } from "zustand";
import { devtools } from "zustand/middleware";

import { ImportStore } from "../types";

import { createImportSettingsSlice } from "./slices";

export let useImportModel: UseBoundStore<StoreApi<ImportStore>>;

export const InitStore = () => {
  useImportModel = create<ImportStore>()(
    devtools((set, get, ...args) => ({
      csvString: "",
      setCsvString: (csvString: string) => {
        set({ csvString });
      },
      ...createImportSettingsSlice(set, get, ...args)
    }))
  );
};

export const Destroy = () => {
  useImportModel.setState(null);
};

export const useImportSelector = <T>(selector: (state: ImportStore) => T): T => {
  return useImportModel(selector);
};

In component:

export const Data = () => {
  InitStore()

  useEffect(() => {
    return () => {Destroy()}
  }, []);
  
  return ...
}

[dbritto-dev]

@1bobofett1 well, that implementation is wrong due to the naming is wrong but the you can create dynamically stores and use .setState(undefined) to "destroy" them

BTW, you need to read the docs we talked about that and other scenarios in the docs

[1bobofett1]

Yes, thanks for the quick reply, I found the solution in the docs

I will attach the link here, for those who will encounter the same problem: https://zustand.docs.pmnd.rs/hooks/use-store#using-scoped-(non-global)-vanilla-store-in-react